I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}
Related
I'm building a custom tooltip that uses position: fixed and a dynamic top and left to follow your mouse cursor around. The tooltip has a relatively complex layout built with flexbox. I'm having an issue with IE11 (which otherwise supports flexbox just fine using autoprefixer) where the width of the tooltip is getting collapsed down as if it had no content.
I made a Codepen stripping out all my implementation details except for the most basic Bootstrap layout and CSS, and the issue is still present. You can see it in action here https://codepen.io/ryangiglio/pen/xajLJr. Here is the code:
HTML
<!-- Regular content -->
<div class="container-fluid">
<div class="row">
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
</div>
</div>
<!-- Tooltip content -->
<div class="custom-tooltip">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
Tooltip Title
</div>
</div>
<div class="row">
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
</div>
</div>
</div>
CSS
.custom-tooltip {
position: fixed;
top: 50px;
left: 50px;
background: white;
box-shadow: 0 0 5px 1px black;
}
This is how it looks in Chrome
And how it looks in IE11
Unfortunately, I didn't care enough about the underlying issue here to spend too much more time solving it, so I ended up hard-coding a width on the .custom-tooltip class which solved the problem enough for me to ship it.
The link you provided was not valid cause I'm not a pro member.
On another note, I'm not sure, but it could be that when you set the box shadow property it changed the display, but I'm not sure and wanted to test that theory out but couldn't.
--- Edited
Try the below code you have to also make sure you correctly set the flex-direction property.
div.custom-tooltip{
display: flex;
flex-direction:column;
}
div.row{
display: flex;
flex-direction:row;
}
--- EDITED ANSWER ---
/*
I set the tooltip box containers
width to be a percentage, I don't
know if this a documented issue
with ie11 or not, where ie 11
doesn't realize that flex is being
used on a fixed element and goes with
default values for width.
*/
div[data-tooltip-boxwidth="300"] {
width: 20%;
}
I'm not going to try to explain this in words, just have a look at this fiddle:
https://jsfiddle.net/fhf8rwno/4/
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
In either Chrome or Firefox (possibly other browsers too), watch the red column as you resize the browser width. You should notice that on every other change in browser side a one-pixel-wide gap appears at the right edge of the parent container, allowing the parent background to come through.
If I instead use col-xs-6 instead of col-xs-7 and col-xs-5, the issue disappears. So it seems the browser's pixel math may cause this due to the odd/even mix of column ratios.
This may not seem like much, but the site I'm working on uses this pattern a lot and half the users are seeing some very noticeable and unsightly dark lines.
Any thoughts or suggested hacks?
Edit: here's a hacky way of achieving this. http://jsfiddle.net/fhf8rwno/8/
CSS
.row.no-gutter {
margin-left: 0;
margin-right: 0
}
.row.no-gutter [class*='col-'],
.row.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red; position: relative; right: -1px;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
A colleague and I have come to a semi-solution, but I'm not going to accept this answer just yet in case someone comes up with something less hack-y.
Shifting the last column's margins by one seems to help the issue:
.row.no-gutter [class*='col-']:last-child {
margin-right:-1px;
margin-left:1px;
}
https://jsfiddle.net/fhf8rwno/6/
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/
Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.
Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:
#media (max-width: 767px) {
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
}
Here's the staging site I'm working off of: http://www.kesernio.com/playground/
I wonder if changing the padding helps to set the images 100% in the first place.
The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero )
In your case remove the padding of your col-- with images.
<div class="container" style="background-color:green;">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
</div>
About your scrollbar, in fact you do this:
<div class="container" style="background-color:green;padding:0">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides.
To remove the scrollbar set the margin of the .row to zero to:
<div class="container" style="background-color:green;padding:0">
<div class="row" style="margin:0">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids