When v-data-table is on mobile view, the divider between items is not clear.
How can I custom this divider, for example linewidth and color?
What I want to do:
Custom divider on mobile view
Code sample from vuetify doc
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
You can simply override Vuetify CSS with your own styles.
Change border width from border-bottom: thin to border-bottom: medium:
Demo
https://codepen.io/aQW5z9fe/pen/QWjVYpL?editors=0100
Choose the "vertical layout" in the editor there and then resize the area to <700px width (or the window itself) to see style changes:
Styles
#media screen and (max-width: 700px) {
.theme--light.v-data-table thead tr:last-child th,
.theme--light.v-data-table tbody tr:not(:last-child) td:last-child,
.theme--light.v-data-table tbody tr td,
.theme--light.v-data-table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {
border-bottom: medium solid rgba(0,0,0,.12);
}
}
Change media query and styles to whatever values you need.
Related
Please help me with the tables in vuetify.
I need to limit the width of the table, and remove text wrapping. I need a horizontal slider.
codepen
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1 max-width-test"
></v-data-table>
</v-app>
</div>
.max-width-test{
max-width: 900px
}
The css method helped me: white-space: nowrap;
Codepen
.max-width-test{
max-width: 900px;
white-space: nowrap;
}
I'm working on a Foundation 5 site and need to customize the .top-bar navigation menu. I am using the SASS version of Foundation.
I'm having difficulty modifying the active and hover styles for the menu links using SASS. I've changed their colors, however I want to add a border-bottom to the links to indicate active/hover state.
By default, Foundation uses background color for indicating active/hover, and I'm not sure exactly where I need to edit to add border-bottom. As I currently have it, the border is far too low, I need it to be underneath the text.
Currently Looks like this:
Need it to look like this with border-bottom on :
current styles in _settings.scss:
$topbar-bg-color: $white;
$topbar-bg: $topbar-bg-color;
// Height and margin
$topbar-height: rem-calc(65);
// Set the link colors and styles for top-level nav
$topbar-link-color: $asc-darkgray;
$topbar-link-color-hover: $lesson-orange;
$topbar-link-color-active: $lesson-orange;
$topbar-link-color-active-hover: $white;
$topbar-link-bg: $white;
$topbar-link-bg-color-hover: $white;
$topbar-link-bg-hover: $white;
$topbar-link-bg-active: $white;
$topbar-link-text-transform: uppercase;
// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($asc-lightgray, $lightness: 13%);
$topbar-divider-border-top: solid 1px scale-color($asc-lightgray, $lightness: -50%);
By default the <a> tags in the top-bar are set with a line-height equal to the height of the top-bar to ensure they are aligned to the middle.
If you want to use border bottom on a menu link and still have it vertically aligned to the middle of the top-bar you just need to span the link text:
<li>
<a href="#">
<span class="link-border-bottom">border bottom link</span>
</a>
</li>
and give your <span> an class with border-bottom (on :hover if you want):
.link-border-bottom {
&:hover {
border-bottom: 1px solid orange;
}
}
or if you want the active link to be underlined:
.active {
.link-border-bottom {
border-bottom: 1px solid orange;
}
}
Here's a Plunker using vanilla CSS.
I want to add a image hover effect on only the div images not the whole html code. How do I do this?
Take a look at how to "nest" CSS selectors.
Here's an example. Is this what you need?
<div>
Image in a div
<img src="http://baconmockup.com/300/200" />
</div>
div img:hover {
border: 1px solid red;
}
You can see it live here.
Please take a look at the following fiddle: http://jsfiddle.net/4LZnC/
I need to make it so when you hover on the .dropdown element, the .expandable to show but using the parent's background and border.
In other words, try removing position:absolute from .expandable. I need the same effect but without .expandable pushing the other content down. How do I achieve that? I really have no clue.
You will need to assign position absolute to the parent element and wrap it with a fixed height container.
HTML
<div id="wrap">
<div class="dropdown">
Flow content
<div class="expandable">
my expandable content here my expandable content here my expandable content here my expandable content here my expandable content here
</div>
</div>
</div>
CSS
div.dropdown {background:red; border:3px solid blue; position:absolute; width: 100%;}
div.dropdown .expandable { display:none; position: relative; top:100%; left:0; }
div.dropdown:hover .expandable { display:block; }
#wrap{ height:26px; }
Working Example http://jsfiddle.net/4LZnC/3/
I'm trying do change the textColor of jqplot pieCharts to #ffffff, because a dark slice is eating its label.
I didn't found a way to do that. Any ideas?!
Just override the CSS
HTML
<div id="pieChart"></div>
CSS
#pieChart{
width: 400px;
height: 400px;
color:#ffffff;
}
JSFIDDLE DEMO