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.
Related
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
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
I would like to constraint one div to take the same height as a sibling div that would have variable content. Additionally, i want both divs to have a min-height of 100% of the window's size.
Here is the JSFiddle : http://jsfiddle.net/m5q38/1/
The problem is that, i would like to use min-height on the divs, but this requires the parent container to have a specified height, which i can't fix. And if i use height: 100% on my divs, they will take the height of the window, including when the content of the #container div is too large for this div and would overflow.
Alternatively, if i don't use min-height and the #container div has less content, the div won't take the whole window's height :
(Here is the fiddle for this other try : http://jsfiddle.net/m5q38/3/)
Does anyone know how to solve this ?
To make simple i want :
The Green Div to fit its content
The Green Div to have a min height of 100% the window
The Blue Div to have the same height of the green div.
Thanks for helping !
if you can use jquery, see this FIDDLE and note the commented out CSS
using jquery:
$( function() {
$('#left-bg').height($('#container').height())
});
Setting a consistent div height is always an interesting problem. In the past, when I've had multiple sibling div elements I generally just wrap them in on div and set each div css to display:table-cell and that works nicely to keep heights equal regardless of div content.
Not sure you can use that here as you have positioned elements
This can only be done with Javascript, it's a pretty common problem, and there are numerous (javascript) solutions, depending on whether you've got a generalized, site-wide dilemma or just a pair of elements that need a tweak.
If you are using jquery, this will give you a basic solution that you can complicate to your needs:
/* note: add both ready and resize here, via "on", that way they'll
be bound to any selectors (not just id) in place of "#element1"
(such as ".left-column"), including those that arrive via an ajax call
(ie. aren't present when the call is made) */
$(window).on(["ready","resize"], function() {
var heights = [$("#element1").innerHeight(),$("#element2").innerHeight()]
var tall_then_short = [heights[0] > heights[1] ? heights : [heights[1], heights[0]];
$("#" + tall_then_short[0]).css("min-height", "#" + tall_then_short[1]);
});
But a far nicer way is to use a library with this feature as it'll tend to be more robust; personally I use Foundation 5's Equalizer feature.
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 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.