I have a v-navigation-drawer and it's design must include a toggle expand button that overflows the drawer itself like so:
But for some unknown reason, I can't remove the overflow hidden property.
I tried to remove it like this:
.v-navigation-drawer {
overflow: auto;
.v-navigation-drawer__content {
overflow-x: auto;
}
}
No success:
Here the codepend reproducing the issue: https://codepen.io/aug-riedinger/pen/poLjJyq
Can anyone help on this?
Thanks
Just as kael said, you need to set the overflow property to visible for normal and mini variant. Like this:
.v-navigation-drawer--mini-variant, .v-navigation-drawer {
overflow: visible !important;
}
.expand-toggle {
position: absolute;
height: 3rem;
z-index: 1;
right: -14px;
top: 30px;
bottom: 0;
.v-btn {
margin: auto;
border: thin solid white !important;
}
}
https://stackoverflow.com/a/6433475/2074736
You want visible not auto, and you also have to set overflow-y: visible for that to actually take effect.
Related
I'm using Foundation 6 for Sites to create a responsive site.
I failed to use pseudoelements ::after and ::before (I didn't forget about the content property).
My browser code inspector shows no pseudoelements and they are not implemented on the page.
Any ideas why it has happened and how to deal with it?
May it be a trouble with sass?
I use them all the time :)
You said you made sure you include the content: '' property inside the psuedo element, so that's good.
If the component is a Foundation CSS component and that element already uses a psuedo element, you can find it using the browser's inspector and see what CSS is targeting it.
Example:
.notification-reward {
align-items: baseline;
animation: jellyIn 1s;
display: flex;
position: absolute;
right: 0;
top: -58%;
&::after {
color: $primary-light;
content: attr(data-earned-points);
font-size: $stat-font-size;
font-weight: 700;
left: 4.3625rem;
position: absolute;
top: 6%;
}
&::before {
color: $primary-light;
content: '+';
font-size: rem-calc(44);
font-weight: 700;
left: rem-calc(40);
position: relative;
top: -1.6525rem;
}
}
I tried with this but it's not working.. I want the image to change its size proportionately but margin-top and margin-bottom to be fixed in pixels.
#imagenslide img {
margin-top: 100px;
margin-bottom: 100px!important;
width: auto;
height: auto;
position: relative;
}
Any help please? Thanks!
use
#imagenslide img {
margin-top: 100px;
margin-bottom: 100px!important;
width: 100%;
height: auto;
position: relative;
}
or you can also use min-width css property also..
Also try to use width in % for responsive..
I think you're close, but I think it's more simple than you think. Try:
<img id="imagenslide"src="http://placehold.it/350x150">
#imagenslide {
margin: 100px 0;
display: block;
position: relative;
}
JSFiddle
I am starting mobile first and adding css as the viewport gets larger, but i've run into an issue with a certain image scaling issue and i can't seem to make sense of it.
I'm using Sass to begin with.
#media 320 i include all my styles for a certain block of content on the page of which I have an image within this block and here is the CSS for this media query:
section.catalog-grid {
position: relative;
height: 100%;
overflow: hidden;
.cat-dvdr {
#include btm-brdr;
padding: 20px 0;
}
h4.catalog-title {
font-weight: normal;
font-size: 1.5em;
color: $blue;
top: 0;
padding: 0;
margin: 0;
text-align: center;
}
h6 {
font-weight: normal;
font-size: 1em;
color: $pale-grey;
padding: 0 10%;
margin: 0;
text-align: center;
}
img.cat-img {
#include center;
}
img.rocket {
width: 40%;
margin-top: 30px;
}
img.wizard {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 60%;
margin-top: 10%;
margin-bottom: 10%;
}
#media min-width 568px I actually wanted the image to be a smaller percentage scale and here's my Sass that i added to this media query:
img.rocket {
width: 30%;
margin-top: 30px;
}
img.wizard {
width: 40%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
My thinking behind this is that since i'm only adding styles that are changing as the viewport gets larger i don't have to add all of the Sass for this block (as i did at the 320px media query) but rather just add the rules that I want changed.
However what is happening is that the 320px media query image percentage size is overriding my 568px media query percentage image size when the viewport is at 568px and i'm not sure why.
Attached is a screenshot of what is going on in DevTools and i suspect that the reason that the 320px style is overriding the 568px style is due to more specificity since it notes all the parent elements of this particular image.
However i've attempted to remove the specificity from the 320px file so that the only rules that i want to be affected on the 320px file would be. In other words not include the entire block and its children but only the classes i want adjusted at this specific viewport size and that didn't work either.
Does this make sense?
Here is the screenshot:
In the 568px query, the image is targeted as:
img.rocket { ... }
In the 320px query, it's:
section.catalog-grid img.rocket { ... }
Since you have the additional specificity on the 320px rule, it will always override the less-specific rule no matter where it is located in the style sheet. You'll either need to match that specificity in your 568px rule, or reduce the specificity of the 320px rule.
In your sass, it looks like you have image.rocket contained inside the section.catalog-grid block:
section.catalog-grid {
...
img.rocket { ... }
}
That creates the compiled rule you're seeing.
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question