I have an issue where my CSS animation is jumping straight from start to end, and the issue seems to be related to the one answered in this post. My question is this: How can I make a width transition from x pixels to "auto" without actually using the auto keyword?
Width auto and a fixed width can't be animated. What you can do is change the max-width.
.element{
max-width: 0;
width: 0;
transition: your transition style
}
.element.active{
max-width: 9999px;
width: auto;
}
I'll hope this helps
Related
I have a layout like this one. I need the green element to be always centered, whatever the screen size. It works, unless the scrollbar appears.
I've seen in chrome there is 'overflow-y: overlay' css attribute, but I can't find a way to reproduce the same behaviour on other browsers, unless with some javascript (which I would like to avoid for something like this)
IMPORTANT: always hiding or showing the scrollbar is not an option!
Is there a way to achieve the wanted result?
I've just created a fiddle for this. Just remove padding from .body and set width as 100% - padding, like I did.
If you don't want only green div to be scrollable, just move overflow-y: auto; to .container
.container .body {
overflow-y: auto;
max-height: 300px;
width: calc(100% - 200px);
margin-left: auto;
margin-right: auto;
}
Say you have this:
html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}
<div class="box">Screen 1</div>
You'll get something that fills the screen, no scrollbars. But add another:
<div class="box">Screen 1</div>
<div class="box">Screen 2</div>
You get not only vertical scrollbars (expected), but a slight horizontal scroll.
I realize you could omit the width, or set it to width: 100%, but I'm curious why this is happening. Isn't 100vw supposed to be "100% of the viewport width"?
As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%.
.box {
width: 100vw;
height: 100vh;
max-width:100%; /* added */
}
Working Fiddle
scrollbars will be included in the vw so the horizontal scroll will be added to allow you to see under the vertical scroll.
When you only have 1 box, it is 100% wide x 100% tall. Once you add 2, its 100% wide x 200% tall, therefore triggering the vertical scrollbar. As the vertical scrollbar is triggered, that then triggers the horizontal scrollbar.
You could add overflow-x:hidden to body
html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}
http://jsfiddle.net/NBzVV/
I had a similar problem and came up with the following solution using JS and CSS variables.
JS:
function setVw() {
let vw = document.documentElement.clientWidth / 100;
document.documentElement.style.setProperty('--vw', `${vw}px`);
}
setVw();
window.addEventListener('resize', setVw);
CSS:
width: calc(var(--vw, 1vw) * 100);
1vw is a fallback value.
If you're working in a framework (ASP.NET for example) where there's possibly a parent element wrapping around the html, then setting the html's max-width to 100% will solve the problem without using the "band-aid" solution overflow-x: hidden.
html {
max-width: 100%;
}
The reason why 100vw is causing a horizontal scrollbar is well explained in other responses: 100vw counts the width of the vertical scrollbar to the html itself. I think this is a little absurd, but it is what it is, you know :)
Update: As of Chrome version 66, I cannot reproduce the behaviour reported by question anymore. No workaround appears to be needed.
Original Answer
This is actually a bug as reported in this answer and the comments above.
While the workaround in the accepted answer (adding .box {max-width: 100%;}) generally works, I find it noteworthy that it does not currently work for display:table (tested in Chrome). In that case, the only workaround I found is to use width:100% instead.
Broken Fiddle with display:table
Working Fiddle with display:table and width:100%
to get rid of the scrollbar width included in vw i had to do this:
html, body {
overflow-x: hidden;
height: 100vh;
}
*,
html,
body {
margin: 0;
padding: 0;
overflow: hidden;/*add This*/
}
/*and enjoy ^_^ */
You can try:
*{ box-sizing: border-box}
the reason why the content is flowing out of screen is maybe you have extra padding or border on the div and it cause the content out of the broswer
We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:
.div {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 20%;
}
Now we would like to be able to set a maximum height to this div. Because the height of the div is determined by the padding on the div we would need the div to be border-boxed. So far so good. When trying to use a min-height on the div, this works. The max-height on this div however does not work for some reason.
.div {
max-height: 60px;
}
I created a fiddle to show you what i mean: http://jsfiddle.net/UxuEB/3/.
Tested this on Chrome, FF and IE. Can somebody tell me what I'm doing wrong or why this doesn't work as expected?
I realize this answer comes incredibly late to the party but I was trying to solve this exact same thing today and this question is the first result in Google. I ended up solving it with the below code so hopefully that will help someone out in the future.
First, add an extra inner div:
<div class="control control-max-height">
<div class="control-max-height-inner">
Max-height
</div>
</div>
And set the padding on that while hiding the overflow on the outer div:
.control {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.control-max-height {
max-height: 120px;
overflow: hidden;
}
.control-max-height-inner {
padding-bottom: 20%;
}
This obviously assumes you're fine with hiding part of the inner element when it overflows. In my case that wasn't a problem because the inner element is just an empty link element to make the whole thing clickable and the outer element just has a centered background image and a border set.
See fiddle: http://jsfiddle.net/UxuEB/7/
The property max-height works on the height of the element and you want to use it on the height and padding-bottom.
I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.
An example:
The element with content is 100px in height.
The max-height is set to 50px (element is now 50px in height).
Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.
JsFiddle example: clicky
Extending from Mike's answer, the same can be achieved with a single DOM element & a pseudo element, eg.
html:
<div class="le-div"></div>
css:
div.le-div {
max-height: 200px;
/* 👇 only necessary if applying any styles to the pseudo element
other than padding:
overflow: hidden;
*/
}
div.le-div::before {
content: '';
display: block;
padding-bottom: 60%;
}
Min-height property defines the height when height is solely dependent on padding only but max-height does not.
Not sure why but now in 2020, min and max css units does nice job as we need.
.classthatshoulddefineheight {
padding-bottom: min(20%, 60px);
}
So when 20% becomes greater than 60px then it will be limited to 60px (minimum of them).
The limitation to Mike's answer (and this Brad's answer - although Brad's technique can be incorporated to reduce the number of levels of containers) is that it requires overflow: hidden - which in my use-case (and in many others) a significant limitation.
I've reworked his example to work without overflow: hidden; using an additional level and absolute positioning.
http://jsfiddle.net/2ksh56cr/2/
The trick is to add another container inside the inner box, make it absolute positioned and then add the max-height to that container as well:
.inner-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 120px;
}
As long as your fine with having some additional DOM-elements, this should work in all scenarios for more or less all browsers.
Try display: flow-root; on the parent container.
I want to make a div resizable with resize css property:
#foo{
overflow: hidden;
resize: both;
}
I can freely resize it with firefox.
with chrome/safari I can't resize it smaller than initial size.
their is a way to allow resize smaller with webkit? (min-width / min-height don't works)
see the live exemple from MDN (with 2 nested divs)
https://developer.mozilla.org/samples/cssref/resize.html
Better solution is to use :active pseudo class e.g:
div:active {
height: 0;
width: 0;
}
Example: http://jsfiddle.net/kronenbear/v4Lq5o09/1/
There is a small workaround that I found here, but it does work.
On hover, change the height and width to 1px
#foo:hover{
width: 1px;
height: 1px;
}
It sounds like this will cause a slight "flash" as the width and height are dramatically changing, but ... it is a hack.
I've been trying for hours but can't make it to work better than the hack, if I could just trigger a userresize I would be happy setting chrome's width to min-width then trigger resize to put it where I want, since it seems that you can move it back to original position after moving. But I don't find how to.
Using that live example as a reference, I was able to set the initial size to be equal to the width and height of the div, and the min-height and min-width to be the minimum dimensions allowable in Chrome.
#foo {
resize: both;
overflow: scroll;
width: 300px;
height: 300px;
min-width: 50px;
min-height: 70px;
}
div {
background-color: #acacac;
border: 1px solid #000;
}
<div id="foo"></div>
Using a transition when enlarging an image doesn't seem to work in chrome.
HTML:
<img src="foobar.png">
CSS:
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
What is wrong?
It won't work with percentages it seems. Also, if you wish to transition height as well, you need to declare it in the orignal img styling. Shown here: http://jsfiddle.net/Skooljester/6Dk4D/1/ it works if you specify a width in pixels for the hover.
Edit: If you specify the first width as a percentage then the second can be defined with a percent as well and still work. Thank you Tyilo
You can also use a max-width trick. Set a high max-width amount on the hover and the original image width will be respected by the transition.
http://codepen.io/rustydev/pen/BKOBNZ