Div inside bootstrap column doesnt strech in safari on iOS - css

What I need is to place 12 divs in a row, with bootstrap.js grid system.
Each column of this row needs to have a border. So, if I put 12 divs with css-class for a column (xs-col-1)
it will break as I put a 1 pixels border to each column.
So my idea was to have an inner div. The problem is that the inner div doesn't stretch. I have tried to put with:100% but this makes not difference. The character inside the inner div goes outside the boundaries for the inner div. The inner div takes up more or less 10% av the width of the parent (xs-col-1).
As I need this on mobile, Im using xs-col-1. And I cannot specify the width in pixels for the inner div.
Is there a way to solve this?
Here is the code for the border put inside the parent. Issue here is that 12 columns will not be on the same row, the column number 12 will go to next row:
<div class="row">
<div class="col-xs-1" style="border:1px solid black;">
<div style="width:200%;">A</div>
</div>
<div class="col-xs-1" style="border:1px solid black;">
<div style="width:200%;">A</div>
</div>
</div>
And here is the code for the border put inside the child. Issue here is that the width for the child doesnt stretch. The letter inside the child is much wider than the inner div itself:
<div class="row">
<div class="col-xs-1">
<div style="width:200%;border:1px solid black;">A</div>
</div>
<div class="col-xs-1">
<div style="width:200%;border:1px solid black;">A</div>
</div>
</div>

Solution seems to be to use "display:table".
When I put this inside the inner div, then it stretched.

Related

Angular-material: limit md-content height

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

divs with display: table ignore paddings of parent div

Is there any way to get a display:table cell, to keep its padding of its parent div?
If I have a bootstrap div like so:
<div class="col-sm-5 defaultRowHeight" id="row1">
<div style="display: table">
<div class="tableCellMiddle">
The padding rule from col-sm-5 that comes from bootstrap is ignored. I want to use table cell so I can easily v-align.
here is a fiddle
http://jsfiddle.net/w79w8f6a/
The 1st 2 boxes work as I expect but they dont in my real world example at my closed source.
the bottom 2 boxes lose all their padding or margin but that doesnt mimic my issue in my real source.
any ideas?

Text in child div goes out of parents max width

So i have this problem with divs. I have one div containting two other divs that are next to eachother, problem is that in the right div I have bunch of text and i want that text to start a new row when it goes to div #1 (his parents) max width.
Here's my HTML
<div id="parent">
<div id ="left"></div>
<div id ="right">
blahblablabla
</div>
</div>
Use the property word-wrap:break-word; in your CSS for <div id ="right">. You may also need to set overflow-x: hidden;.
maybe you want to put <div id="left"> inside <div id="right"> and just make the right div width = 100%?

howto make divs expand around fixed-sized div?

I want to frame a div surrounding divs having higher z-index.
(The framed div will contain a slideshow with elements, animated and with wierd margins, and the masking divs are supposed to hide the the texts being animated from the side.)
I'm thinking something like:
<div class="fullwith mask"></div>
<div class="mask leftpadding"></div>
<div id="slideshow" style="width:640px;height:405px;"></div>
<div class="mask rightpadding"></div>
<div class="fullwith mask"></div>
I've created this fiddle that by no means work, please fill the gap or tell me if I'm off the mark here.

How to prevent a child element from clipping if the parent's overflow is not visible?

Once assigning overflow with a value other than visible, all its child elements will be clipped. It is the purpose of the overflow property. However, I have to make one of the child elements to be 'floated' and not clipped (like a popup) -- just one of them; not all. Is it possible?
Take the following as an example. Is there any CSS setting that does not clip the yellow div, while clipping the blue element? (Currently they are both clipped)
<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style="top:30px;width:50px;height:100px;background:yellow">
</div>
<div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue">
</div>
</div>
The code can be also found at http://jsfiddle.net/kZBxD/
Do you need something like this:
check this fiddle : http://jsfiddle.net/kZBxD/3/
<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style=" position:fixed;width:50px;height:100px;background:yellow"></div>
try the below fiddle: the yellow div is floating outside and blue div is inside as per you need.
http://jsfiddle.net/kZBxD/2/

Resources