How to prevent flexboxes from shrinking? - flexbox

I have two flexboxes which shrink on height change and nested content gets overlapped.
How to prevent this?

just add flex-shrink:0 to your element and the flexbox will stop shrinking.
<div class="flx">
Some Content
</div>
<div class="flx">
Some Content
</div>
<style>
.flx{
display: flex;
flex-shrink: 0;
}
</style>

Related

item within flexbox column is not sticky

I try to let a menu bar within a header stay sticky. The header is a flexbox with vertical align (flex-direction: column). But as you may guess, it does not work.
simplified arrangement
here
HTML
<header>
<div id="quality-logos">
[some images here]
</div>
<div id="logo_motte_top">
[a big logo here]
</div>
<div id="navigation-wrapper">
<div id="navigation">
[some navigation code here]
</div>
<div id="menu_promo_text">
<div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
</div>
</div>
</header>
CSS (shortened)
header{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
div#navigation-wrapper{
position:sticky;
top:0;
}
You can see it live at motteduesseldorf.de
For your website's link, your <header> is a child of another div called #wrapper. position: sticky is probably being applied but it is not visible because the entire <header> div is not in view. Put another way, position: sticky works only "until" its immediate parent.
One way to fix your issue would be to move <div id="navigation-wrapper"> outside of <header> and make it an immediate child of the <div id="wrapper">.

DIV Class Nested in Section Class not setting to display: flex

I am trying to learn CSS, and find myself stuck. I am hoping you can help.
I have created a section and I want this to be a flex container. I have nested divs in the section for each item I want to display in the container. I have added a class to both the section and the parent div, but I cannot get the display: flex property to apply to the div. When I inspect in Chrome as I have it now it reflects display: block. If I try to select the div.class it will not style. Thanks!
HTML:
<section class="headline">
<div class="Details">
<div>
<h4>headline 1</h4>
<p>some content included.</p>
</div>
<div>
<h4>headline 2</h4>
<p>some more content.</p>
</div>
<div>
<h4>headline 3</h4>
<p>more content</p>
</div>
<div>
<h4>headline 4</h4>
<p>end content</p>
</div>
</div>
</section>
.headline {
color: white;
background-color: black;
display: flex;
}
.details {
display: flex;
}
I figured it out - the class .Details was in the html with a capital d and in the stylesheet with a lower case d. :)

Bootstrap layout - not centered and bad zooming

i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.

Adding borders to span divs in Bootstrap messes up layout

I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
So for example yours would now be
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
Here's a fiddle: http://jsfiddle.net/me73v/
Another option would be to tweak the span widths with JQuery:
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
You may also use negative margins :
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.

Divs in line - align to bottom

I have a problem with div positioning in my form. My page contains a sheet. With div layout as below.
In divs on the left side, there are description of the fields. (they share the same style class)
In divs on the right side, there are the fields. (they share the same style class)
After validation my page look like this:
But I want it to look like this:
Honestly, I thought how do deal with it, for quite a white, and I simlpy have no idea what to do it. My page is almost ready so I'd like to fix that with possible at low cost.
[edit1]:
My current css look simple, something like this:
div_on_left{
clear: both;
float: left;
width: 440px;
padding-top: 5px;
padding-bottom: 8px;
}
div_on_right{
float: left;
width: 500px;
padding-top: 3px;
padding-bottom: 6px;
}
[edit2]:
I have just found one solution (posted below), but I don't like it. It will crash if context of divs on the left is too big. That's due to
position:absolute;
So I'd like to avoid this property.
<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>
<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>
<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>
It have to be a common problem. How do you deal width forms with validation that apear over the field boxes?
There's a solution for your problem but it involves a table-cell layout. The layout must have a row and two inner cells aligned to the bottom.
Here is a JSFiddle Example: http://jsfiddle.net/cvbLC/
I'm not aware of which browser support you are needing, but here is more information about this matter: http://www.quirksmode.org/css/display.html

Resources