I am using the framework foundation and is very useful.
I wanted to know how you can change the width of the canvas menu.
Use escusicamente css.
Thank
If you are using the scss version of Foundation it's as easy as changing $off-canvas-width: rem-calc(250); in your settings.scss file.
If you are using css you need to change the width of the .left-off-canvas-menu and .move-right > .inner-wrap transform.
I suggest you override specificity by adding a new class to .left-off-canvas-menu and off-canvas-wrap, something like <div class="my-site off-canvas-wrap" data-offcanvas> and <div class="my-site left-off-canvas-menu>
Then CSS:
.my-site.move-right > .inner-wrap {
webkit-transform: translate3d(newwidth, 0, 0);
-moz-transform: translate3d(newwidth, 0, 0);
-ms-transform: translate3d(newwidth, 0, 0);
-o-transform: translate3d(newwidth, 0, 0);
transform: translate3d(newwidth, 0, 0);
}
and
.my-site.left-off-canvas-menu {
width: newwidth;
}
For Foundation 6, I used the following code to change the width of the off-canvas menu (using a variable):
$offcanvas-right-size: 315px;
.is-open-right {
-webkit-transform: translateX(-$offcanvas-right-size);
-ms-transform: translateX(-$offcanvas-right-size);
transform: translateX(-$offcanvas-right-size);
}
.off-canvas.position-right {
width: $offcanvas-right-size;
right: -$offcanvas-right-size;
}
I had left and right menus and wanted the right to be smaller.
On an addition to the answer above (Rep blocks comment function)
Also made with foundation 6
The thing Lee forgot to address is that the second div is nested into the off-canvas position-left canvas, at least in my code
The first class is for the size of the off-canvas menu and the second to also move the content
.is-open-left {
-webkit-transform: translateX(125px);
-ms-transform: translateX(125px);
transform: translateX(125px);
}
.off-canvas-menu{
padding-left:125px;
}
Related
I have a v-select widget (combobox / select) in a Vue application. When I open it and hover over an option, the background-color of the option is highlighted (currently light-grey). I want the background-color to have a different color when the mouse arrow hovers over an option. I can not see a property of the v-select widget that supports this. Is there a way to achieve this?
v-select::hover {
background-color: "#00857A";
}
<v-select
append-icon="../assets/img/sy-arrow-chevron-down.svg"
background-color="white"
:height="68"
item-text="label"
item-value="key"
class="mr-3"
v-model="type"
:width="421"
:items="searchCriteria"
#change="performSearch()"
></v-select>
Define color:
.v-list-item--link::before { background-color: red; }
Define opacity:
.theme--light.v-list-item:hover::before { opacity: 0.64; }
Add item-color attribute to v-select
I guess this is the official way to modify Vuetify: https://next.vuetifyjs.com/en/customization/theme
Add a style for listitem on hover:
div.v-select-list div[role=list] div[role=listitem]:hover {
background-color:#00857A;
}
and the background of the selected option will be colored darkgreen
Maybe this can help you, it worked for me
.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
background:#9d2449 !important;
color: white !important;
}
.theme--light.v-label {
color: rgb(252, 252, 252);
}
.theme--light.v-select .v-select__selection--comma {
color: rgba(255, 255, 255, 0.87);
}
Use :
::v-deep to access the css.
::v-deep .v-list-item--link::before { background-color: red; }
::v-deep .theme--light.v-list-item:hover::before { opacity: 0.64; }
Just add bg-color prop to your v-select.
<v-select
name="foo"
label="foo"
:items="['foo', 'bar']"
bg-color="red"
/>
I've tried finding the solution to my problem but came up with nothing, so forgive me if this has been covered elsewhere.
I'm using Masonry for a client's site that I'm currently developing. In any viewport size that is 768px or wider, there are two element widths: 20% and 40%; when sizing down to mobile, i.e. up to 767px, the element sized at 20% becomes 50% and the one at 40% becomes 100%.
The problem is that, in mobile view, Masonry doesn't always put two of the 50% elements into a row, so the grid becomes broken up.
Here's a link to the dev site and Masonry grid: http://176.32.230.48/maxence.io/#work
Here's my CSS for the two different grid-item sizes:
.grid-item,
.grid-sizer {
width: 20%;
#include media(xs-max) {
width: 50%;
}
}
.grid-item-lg {
width: 40%;
#include media(xs-max) {
width: 100%;
}
}
Here's the relevant block of jQuery:
$container.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
I'm also using the Masonry layout method on window resize:
var windowWidth = $(window).width();
if (windowWidth < 768) {
$('#grid').masonry('layout');
}
Anybody have any ideas?
Is it possible to specify the position of the tooltips that noUiSlider draws? It appears that by default it places the first one over the slider, and the second below. I understand the usability goal here, but I'd like to put both above or below.
Example (with tooltips above and below): http://jsfiddle.net/leongersen/z83oz9np/2/
noUiSlider.create(div, {
start: [0, 50], // 2 handles
range: {
'min': 0,
'max': 50
},
tooltips: true // 2 tooltips but how to position?
});
I don't believe there is an option to specify the position of the labels. In the css version you're using there's
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
bottom:-32px
}
Which you can override to be the same as the other label:
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
top: -32px;
bottom: initial;
}
See your updated fiddle: http://jsfiddle.net/z83oz9np/20/
Think that's the best thing to do here. In the latest version on github I've noted this styling is missing, so take this into account if you ever update it.
You can overwrite the attribute "bottom" from the css class ".noUi-horizontal .noUi-tooltip"
for example to do the tooltip go below the slider:
.noUi-horizontal .noUi-tooltip {bottom: -130%;}
For others that find themselves here, this will give you more consistent positioning than negative pixel positioning:
.noUi-vertical .noUi-handle-upper .noUi-tooltip {
right: unset;
left: 120%;
}
This removes the right: 120%; from the tooltip and repositions it with respect to the left, like the bottom tooltip.
for me none of this solution worked so I ended up with my own:
.noUi-horizontal .noUi-tooltip
{
left: unset !important;
}
.noUi-target
{
direction: unset !important;
}
done.
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
My client is asking me to reduce size of current website for desktop browsers by 30%.
is there a css or meta tag to do it like viewport meta tag on a mobile browser?
Hmmm... I know this is an old question, but there is a MUCH better way to go about this: use the CSS scale() transform function on the <html> tag to scale EVERYTHING inside. Check out this jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/
The magic is all here:
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
You can look at the css screen media type.
It is:
Intended primarily for color computer screens.
You can use it this way:
#media screen {
body { font-size: 70% }
}
There is also a handheld media type, primarily:
Intended for handheld devices (typically small screen, limited bandwidth).
However, you will need to test the different devices and desktops your client is focusing on in order to determine how using these media types will effect the user experience.
Odes is right.
#media screen {
body { font-size: 70% }
}
But to make this really work well, you must use ems instead of px everywhere. That goes for margin and padding as well as width and height of all elements.
A good way to do this is to use SASS. Just create your own sass function to convert your px measurements into ems on the fly. Something like this will do:
#function em($px, $context: 16, $basesize: 16) {
#return (($px/$basesize)/($context/16))+em;
}
Which then gets used in your CSS like so:
div { font-size:em(12); width: em(200,12); }
So, if the body font size was set to 100%, then the font size would be equivalent to 12px and the width of the div would be 200px wide.
Here code for proportional scale and positioning, wnen using "transform: scale"
CSS
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
JS
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale );
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
You can enable the meta viewport tag on desktop with JS. First you should derive the setting (width) from the meta tag:
var viewportcontent = $( "#myviewport" ).attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
Then you need a little JS and the solution of Mike to get this working solution: http://codepen.io/anon/pen/GqoeYJ. Note that this example forces the width to be 1200 pixels, but initial-scale: 0.7 could be implemented in the same way.