Angular-material: limit md-content height - css

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

Related

Angular Material flex="50" only for layout="row"

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

Position DIVs in same place, toggle them

I'm having a little issue with couple of DIVs.
I need two DIVs to be positioned in exactly same place, and toggle them. As one div disappear, another should appear. This I will do using jQuery toggle().
The issue is that both DIVs should be part of the page flow and positioned exactly the same way. How I would achieve that?
So, there is some previous div, that occupies some place, has relative positioning and non-fixed sizes (dependent on window measures)
<div class="header">
... </div>
Then my div
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; ">
... </div>
and other my DIV
<div id="aboutDiv" >
This is ABOUT
</div>
Two later divs should occupy the same place. What positioning tags I could use?
The design adjusts to the window size due to flexible element -- very first DIV "header", so no absolute positioning is possible.
just put them one after another
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; "> ... </div>
<div id="aboutDiv" >
This is ABOUT
</div>
both should be positioned relative , when one is hidden then other will move up and they will be in the same place - as long as you are using toggle to always have one hidden and one shown
You either need a relatively positioned parent container with absolutely positioned children, or hide one and show the other when its faded out completely

Full width expanding div using 960 grid system?

How do you get a div that expands to the full size of the browser (no matter how you resize) while working with the 960 grid system? I can only think of something like this - but I don't like it because what if you have a background for the container_24 then you'd have to set it two times. The point is, I want everything else working under the container_24 even the text inside the full expanding div.
<div class="container_24">
<!-- stuff -->
</div>
<div style="width: 100%; background-color: gray;">
<div style="margin: 0 auto; width: 940px;">
Hello
</div>
</div>
<div class="container_24">
<!-- more stuff -->
</div>
Putting a z-index value on both the container and expanding div and having the z-index value for the expanding div larger than the container will lift it out. You then need to set the position of the expanding div to absolute and then it will expand out of the container. I'm sure there are some cases where this won't work/cut it though.

CSS with one fixed width column and another 100% width

I have a layout requirement whereby the right column needs to be fixed width and the left column should span whatever width is available.
I understand that I can remove the width and float from the left column and that should make it take up entire space available.
Here is what I have
<div style="height:300px;border:1px solid red;padding:10px;">
<div style="height:200px;border:1px solid red;margin-right:150px;">
this should take all width
</div>
<div style="height:200px;border:1px solid green;float:right;width:120px;">
this is right bar with fixed width
</div>
</div>
Any ideas?
Your code is correct. Just move the floated element up:
<div style="height:300px;border:1px solid red;padding:10px;">
<div style="height:200px;border:1px solid green;float:right;width:120px;">
this is right bar with fixed width
</div>
<div style="height:200px;border:1px solid red;margin-right:150px;">
this should take all width
</div>
</div>
http://jsfiddle.net/wwEQb/
Dances with display: table-*** here:
http://jsfiddle.net/EXNvF/

css float/positioniong

So I have a small div for the border, and three divs inside (see image at end). Green is full size (minus padding etc); Blue should float left and have specific width; Red should float right and also have a specific width. However I'm messing something up. Both of the blue and red divs float outside the main div. What am I doing wrong here?
Here's my current code:
<div style="border: 2px solid black; width: 630px;">
<div style="width:auto;">Lorem ipsum</div>
<div style="width:150px; float:left;">This is the blue box</div>
<div style="width:150px; float:right;">This is the red box</div>
</div>
Ideal Float http://www.mfrl.org/images/howtofloat.png
Positioning of floats is funny. Basically, the main div is not taking into account the height of the floated elements when figuring out its own height. The easiest way to resolve this is to add a clearing element after the floated elements.
This fiddle should explain itself clearly: http://jsfiddle.net/QQxb3/2/
I think that the folks who commented on your post saying that it does work must have misunderstood what you mean by "main div", because specification, which Chrome does follow and IE follows in this particular instance, would place the floated elements outside of its parent div.

Resources