http://codepen.io/anon/pen/Keisz/ <-- simple example
This codepen mimics an issue I'm having. I want the parent elements (outer and inner containers) to fully encompass their content (the content div) - I'm at my wit's end of how to accomplish this and I'm almost certain it's a simple fix.
Applying
box-sizing:border-box;
to the child element is not what I want. I want the parent to resize to child, not the other way around.
Any help you could provide would be most appreciated!
EDIT: I think there is some confusion. I want the parent to dynamically resize to contain the largest child width + padding. The max-height is also a requirement, sadly. :(
Remove the height and width attributes from the content div. Voila
http://codepen.io/anon/pen/pluAk/
Unless you apply box-sizing:border-box; the parent will not take into account the padding while wrapping around the child divs. You need to apply this style. Otherwise the code you've posted works just fine (it neglects the 20px padding on the innermost div and the parent wraps around the width of the child div minus the padding on thew child div).Just remove the max-height from the parent div and you are good to go
Not sure what is the ultimate purpose of why you are doing this, but assuming that it would help, this is an idea
#innerContainer {
display: block;
overflow: hidden;
}
FIDDLE
Related
I've got a Quasar layout, and a component that I need to fill 100% of the height of the q-page-container element. The problem is that the container does not fully expand to cover the entire height (unlike the drawer, which, using absolute positioning, does).
All CSS-tricks I've seen to tackle this problem interfere with the properties of the parent containers, which I'm reluctant to do to make sure I don't break any properties necessary for internal Quasar layout. Setting the child div of the container to height: 100% has no impact, setting it to an absolute value such as 100px does correctly set the height, but I need it to adapt to the browser viewport.
I've set up a fiddle to illustrate the problem here.
In this case I'd like #troublemaker to fill entire height of its container - or rather, its grandparent minus the header height, since the parent container simply expands to whatever content is inside.
PS: CSS layout and positioning have always seemed counter intuitive to me, so if anyone has some good advice on resources to learn how to better understand the logics of it I would appreciate it immensely!
If you have a div inside a q-page, I found the proper way to do this is to let the div inherit the min-height CSS property from the q-page component.
I updated the fiddle to show it: https://jsfiddle.net/u39qbrpj/4/
#troublemaker {
min-height: inherit;
background-color: green;
}
I think q-page-container need a q-page.
So just replace your div by a q-page and it's work.
here is your fiddle fixed: https://jsfiddle.net/uab1rnjh/2/
Or if you really want to work with a div.
You can do the trick with css: height: calc(100vh - 50px);
Here is your fiddle with a div: https://jsfiddle.net/yghL6so8/2/
In the documentation, you can see QPageContainer encapsulates a QPage.
at: https://quasar.dev/layout/page#QPageContainer-API
Using a q-page inside a q-page-container is certainly the most common way. Per the doc a q-page must be in a q-page container. However, if you want to put a div in a container and have it fill the container you can use class="fit" and the div will fill the entire container.
Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.
<div>
<img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
<p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>
div {
background: green;
display: inline-block;
}
my jsFiddle
Any advice is greatly appreciated
Change display property of div to table-caption
(Tested in firefox and chrome)
Updated jsfiddle
Here's the best that I've found:
http://jsfiddle.net/y8Qnd/3/
What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.
This would mean you would have to move up the DOM tree, as you want the image to determine it's parent width. Moving up the DOM tree is unfortunately not possible (yet).
As an alternative, you could position the text absolute, to lift it out of the document flow, and therefore not influence the width of it's parent div. This however would also mean that the height does not get influenced, which is probably not what you are after. You could mimic the correct height by repeating the parent background, but the content underneath would not get pushed down, so that is also not really an option I think. I set up an example anyway: http://jsfiddle.net/y8Qnd/2/
The only option I can think of is javascript. Get the width of the image and apply it to the parent container. In jQuery (I will probably get bashed for using jQuery for such a trivial thing, but I am just not used to writing 'old school javascript' anymore...) it would look something like this:
var $wrapper = $('div'); // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);
and an example: http://jsfiddle.net/y8Qnd/6/
I wanted the .cols inside .row to inherit .row's height and make the .cols be fixed inside the .row.
Here's the fiddle..
http://jsfiddle.net/Hhf8R/
My idea is to make it like a table but using divs.
like this : http://jsfiddle.net/hhUtb/
in order for divs to be 100% of the height of their parent, the parent has to have a defined height.
the browser can't calculate 100%(or inherit) of something that hasn't been fully rendered yet.
You need to set the height CSS property on the parent if you want the child to inherit it.
If you're wanting your height to be dynamic based on the content, that is something that isn't trivially achieved with CSS unfortunately. There are a couple different methods; this one seems like a good place to start.
You need an explicit height on the parent row in order for inherit to have a meaning.
Add a height declaration to your row:
http://jsfiddle.net/LzkgU/
and the floated columns do inherit the parent's height.
(Sidenote: There will be people who tell you that floats can't inherit heights:
CSS - make div's inherit a height
but that ain't necessarily so.)
You can fix the height of your content in js by checking changement that could transform your content.
For example, I have an Html Editor that animate a cursor by using setTimeout. While cursor animates, I change the height of my cell if needed.
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.
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.