Here is a sample design (make the preview wide -- ideally 800px).
https://jsfiddle.net/Brunni/2n3w33g9/
Basically it's a bunch of divs nested with flex and everything works well until container. Then I have the transitioner div which serves for push-right-to-left transitions (I put two example template-wrappers that are currently supposedly scrolling).
I don't understand why the transitioner div is computed as height=0. I guess children can not have a dependency on the parent since the parent is flowed depending on the children, but I couldn't find a statement that this is absolutely true.
Then things get worse since I need to absolute-position the template-wrappers that will be animated. My ultimate goal is to have the scroller/template-wrapper to be 100% of the container even though they are absolute-positioned. Is that even possible?
Related
I have a CSS grid with a scrollable element placed in one of the grid's areas.
What'd I'd like is for the item to shrink if the content is too small to fit the area. I did this by setting align-self to start.
This works great, until the content grows. The element resizes past the end of the grid area it's assigned to.
How can I use align-start but still cap the height to the height of the grid area? I would have expected this to be the default behavior.
One solution is to have the element stretch but then have a child element inside it that contains the actual content. The parent would have overflow: auto and the child would simply grow until it's too large for the container. Unfortunately, this kills the box-shadow.
I could put the box-shadow on the outer element in this case, but then it'll be too large when the content is small.
Any ideas what I can do here? I considered using some Javascript shinnanigans but I'm not even sure how I'd grab the height of the grid area from JS.
JSFiddle: https://jsfiddle.net/1kLenm5a/2/
Apparently max-height: 100% works. I could have sworn I tried that but I was messing with so many other settings at the same time I must have missed it.
Thanks.
I'm trying to get more efficient with building responsive websites and since I'm using Bootstrap (not particularly important for this case - I believe), I was looking into Bootsnipp. I decided to view the site's source and noticed one thing I've never seen before: they did not set a height for any of their containers except for the whole page wrapper and the footer. This baffles me because everything falls into place with the website and it's super repsonsive. I understand the elements where they use Bootstrap's classes like "col-sm-4" and whatnot but does anyone understand the art of making the header, a content container, etc calculate heights without specifying in css? Can anyone explain this concept? I tried Googling but not sure of the correct keywords to find answers.
Also, if you need to see yourself, here is the link to their CSS.
Thanks
Understanding the Box Model is important. As an (overly simplified) rule of thumb, you can think of it like this; there are 2 primary types of elements: inline (span, b, strong, ...) and block (div, p, ...).
Block tags by default are width: 100%. That is to say they will naturally stretch to fill their horizontal area.
Inline tags you can think of as being constricting. They shrik to fit the size of their inner elements. This makes sense when you think of a bold tag: it is not unlike highlighting the text you want to be bold. It stays small to fit the content.
In both cases, though, unless you specify a height, both block and inline tags will shrink their height to fit their inner elements. Because of this, you can think of a website as being a bunch of elements stacked on top of each other, where the top of the page is the bottom of the "stack".
Here is an example of divs without specified heights having their heights changed by the size of the interior content. http://jsfiddle.net/S3q2C/ Notice all the divs have a border to easily see its relative size.
If you don't set an explicit height, containers will automatically grow to fit the content (respectively). Sometimes this is desirable, other times not (think overflow hidden). A possible reason why people use explicit heights in containers could be because of absolute positioning, or if they want to align a nested element that is 50px tall, with another that is 200px tall. An explicit height could also be used to maintain perspective say for a picture or other element (maybe a series of elements). While this answer is the end all be all you might be looking for, the key thing I'm trying to pass along is that an explicit height is used when needed, not all the time.
Here's a quick demo showing you two <div> containers, one with a height set, and another with no height.
http://jsfiddle.net/xrZ73/1/
I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.
This is the scenario.
I have a simple table with a header row including several columns which have a dynamically changing width. Within the head row there are lists of a height that is longer than the head rows height, they are however only supposed to be visible on hover, but when on hover they are supposed to be ontop of the headrow but still having the the original 100% width of the parent being the <td> element of the column.
What I did was to set position: absolute on hover but as soon as that happens the element obviously took all the width it can get, fixable only with a specificly applied width, but that doesn't really help me as the column can be resized.
My Question is if there is a way in CSS ( NOT Javascript ) to achieve a behaviour where the element would still use the parent's width.
The answer to your question will vary wildly depending on what you're trying to accomplish. Most blanket solutions require:
The addition of extra positioning elements (often added using Javascript)
Setting display: block; on the TH, TD elements (often makes the TABLE behave erratically)
The reasons for this is that adding positioning to a table cell removes it from the flow, which affects table alignment (see this bug report comment). A much longer discussion about this issue and the possible solutions can be found at Does Firefox support position: relative on table elements?
That aside…
If you are using the TABLE for site layout, stop now and re-think your choices in life. There are better options:
The best option will be the CSS3 Flexible Box Layout model, if and when it becomes widely supported. Support at the time of this writing is minimal, scattered, and doesn't always follow the same standard (caniuse.com: flexbox)
Until that becomes an option, it's a little known fact that absolutely positioned elements can be positioned inside absolutely positioned elements. See this fiddle for an example of a 100% width/height layout made possible with absolutely positioned elements. Alternatively, the same layout can be made inside a relatively positioned parent element.
If you're not using a TABLE for site layout, then there may be other options open to you. It depends on the desired effect.
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.