We are using angular-material to create a new respsonsive website.
For now we only use the flex-layouts from angular-material.
We have code like this:
<div layout="column" layout-gt-md="row">
<div flex="50">
Here's some text without a fixed length.
</div>
<div flex="50">
Here's some text without a fixed length.
</div>
</div>
In this case we want to achieve, that we have rows (left to right) on large displays with a width of 50% each.
But the problem is: if its a medium or smaller device, it has 50% height (max-height to be more precise) which causes some overlap with the other div as the text is longer than the 50% height of the div.
How can we achieve, that the flex="50" only applies for layout="row" and the column height adapts to the content size?
Overriding the CSS class to
.layout-column > .flex-50 {
max-height: inherit;
}
doesn't work.
I've provided a demo of the problem on Plunker.
The problem was Visual Studio's way of creating HTML files and our oversight.
Adding <!DOCTYPE html> fixed the problem....embarrassing.
But thanks to #srijith's Plunker I finally noticed it.
I tried your problem in a plunker and for smaller screens, the height does adapt to the content of the div.
Check this plunker right here
This is what I used as well
<div layout="column" layout-gt-xs="row">
<div flex="50" style="border: 1px solid green;">
<Really long text here>
</div>
<div flex="50" style="border: 1px solid green;">
Here's some text without a fixed length.
</div>
</div>
UPDATE:
I forked your plunker and fixed it. Basically the flex-33 class was adding a max-height of 33%. I just set the max-height to 100%
Updated plunk
Related
I have been developing a website with 3 rows.
The rows change in height, depending on which one is selected (let's say 20vh when not selected and 40vh when selected).
Inside the rows are blocks containing images like this:
<div class="row">
<div class="block">
<div class="image-wrapper">
<img />
</div>
</div>
<div class="block">
<div class="image-wrapper">
<img />
</div>
</div>
...
</div>
My problem is making the images keep a good aspect-ratio in Safari when the rows are changing height.
In other browsers I have used the aspect-ratio css property, but it is only supported in the latest version of Safari, which I cannot just assume everyone will have.
The other trick would be the "Netflix padding trick", where you put a padding-bottom to have the right height for your images. Unfortunately this trick doesn't seem to work when applied the other way around, with a 100% height and a padding-right. The blocks end up being 0px wide.
I also tried to make the <img> height:100% and width: auto, but then the width is set perfectly for 20vh, and not adapted when parent changes to 40vh.
Here is a codepen, without the aspect-ratio attribute, which allows you to see the problem even on Chrome or Firefox: https://codepen.io/laurapiccolo/pen/KKXxYrj
Does anyone have any idea how to fix this?
Thanks!
How can I make my background colour for section 1/2 fill full screen?
http://codepen.io/ldocherty1/pen/KWGWxz
<div id="sections">
<div class="section one">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
You want to use the VH length unit in CSS, this stand for Viewport Height and there is also its counterpart vw which stands for Viewport Width.
A quick example with these would be:
CSS:
div {
display:block;
height: 50vh;
background-color:#c00;
}
HTML:
<div>
This div will take up 50% height of the viewport that contains it</div>
Without seeing your CSS code in the question I can't give you an absolute answer but you will learn more by playing with your code yourself, with this knowledge. To make a <div> half the screen height simply set: div { height: 50vh; }.
(you may have to set things like min-height as well and/or take into account other more-complex CSS flow things depending on your exact DOM structure)
I've been strugling with some integration issues on angular-material.
On the sample of code below, I'm trying to force the orange div and the blue div to have the same height by adding flex="50".
However, an md-content child element of the blue div containing a large text grows in height whereas it should stay the same and scroll within it's bounds.
http://codepen.io/anon/pen/oxyBMJ
How can I force the md-content element not to grow in height no matter the length of it's content ?
Thanks for your help
You should use md-content as your main container.
<md-content layout-fill layout="column">
<div flex="50" style="border: 5px solid orange" layout="row">
</div>
<div flex="50" style="border: 5px solid blue" layout="row">
</div>
</md-content>
This is how your basic structure should look like. Now define flex values as desired and you will get appropriate result. See the below link for your code.
http://codepen.io/next1/pen/vGrWaM
you have to give the parent of the two div's a max-height and then you giv md-content height:100%; and overflow:auto; like this md-content will stay the same height as "contact" and they will not grow over the parent and not pusch the upper ones
http://codepen.io/danyweis/pen/oxyZLK
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right
.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
How to fix it - add an inner element with the padding.
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
If this doesn't help, please create a demo: http://jsfiddle.net/