In my Vue app, I have a div wrapper that wrap other div's. Here is a code example
<div class="items" :class="opened && 'items_opened'">
<div v-for="item in items" :key="item.id" class="items-item">
<div class="items-item-content" v-if="condition">{{content}}</div>
</div>
</div>
My wrapper .items doesn't have height, its height depends on how many .items-item-content (and .items-item) I have in it. .items has a height of 1 .items-item, but .items_opened has a height of multiple .items-item. In the end, I need my .items to have smooth height animation. It is clear that I have to use transition, but all my experiments failed. I can add animation to the .items-item-content and make their appearance animated, but this is not what I need. I need .items-item-content appears immediately, but .items height should be animated.
Can someone provide a solution on how to reach this, please?
Thanks!
Related
I'm trying to have some elements of design positioned absolutely relative to the page's background but not affecting the page layout (scroll and page height must remain dependent only on the page's contents).
Let say, placing two squares square1 and square2, potentially overflowing on the page's width and maybe below the page's contents.
I've played with the following HTML:
<div id="background">
<div id="inner">
<div id="square1">
</div>
<div id="square2">
</div>
</div>
</div>
<main>
<!-- main content goes here, can be arbitrary HTML -->
<canvas height="1000px" width="10" style="background:red;"></canvas>
</main>
Both with attempts at CSS position: absolute of the squares inside a position: relative background div and overflow: hidden on the inner div ; but also playing with only margin-based positioning, I always end up with the "background" overflowing below the main content. Are there alternatives approach to achieve what I'm trying to do ?
To be more explicit, on this JS fiddle https://jsfiddle.net/1ktfyna4/2/ I'm trying to have the page stop scrolling at the bottom of the red line, while still showing the top of the yellow rectange.
I made it simply using display: flex on the outward-most container, with both the content div and background div inside.
See https://jsfiddle.net/m8pk45re/1/
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I cannot figure out how to scale an image on the left side proportionally to the height of two lines on the right.
I tried to solve the problem with flexbox, but the aspect ratio was not preserved.
<div style="display: flex;">
<img src="https://www.gnu.org/graphics/heckert_gnu.small.png">
<div>
<h1 style="font-size: 128px;">GNU</h1>
<p style="font-size: 32px;">GNU is Not Unix</p>
</div>
</div>
https://jsfiddle.net/1gh1hr0c/
It seems to involve a circular dependency. The calculation of the width and height of the img depend on the height of the right div, and the height of the div depend on the width of the div. The flexbox would need the width of the image to determine the width of the div...
Anyway, what I'm trying to do is still quiet a simple in nature. I think there should be a solution using flexbox or something fancy.
use must st property to your flex container align-items: center;
https://jsfiddle.net/1gh1hr0c/3/
Take this dom as an example.
<div id="container" style="transition: width 1s ease-in-out;">
<div style="width: 400px; display: none;"></div>
<div style="width: 200px;"></div>
</div>
If I alternate which inner div is hidden, can I trigger the CSS3 transition (via reflow)? If this were possible, I could add many inner divs and alternate between them smoothly without having to know what size they were.
I wouldn't think it's possible via CSS alone - transitions are not inheritable, so they would have to be applied to the nested elements in question, and a width transition couldn't be applied without the width anyway so e.g. the nested div would need it's width and 0 set to transition between them either on a hover or a JS click or some event
however I think I really am failing to understand the question;
#container div {transition: width 1s ease-in-out;}
would apply it to all child divs then you just toggle the display and width however you're thinking of doing it anyway?
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)