Hey I am currently rocking a flex box layout.
I am having an issue in chrome where a space in the label div seems to be creating some extra space at the bottom of the row for no reason, in internet explorer it is fine and in chrome with no space it is fine.
<!DOCTYPE html>
<html>
<head>
<style>
div.popup-body{
width:500px;
margin:0 auto;
}
div.popup-form-container{
display:flex;
flex:1;
flex-direction:column;
background-color:green;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-self: center;
}
div.popup-form-control-container{
box-sizing: border-box;
}
div.checkbox-container{
display:flex;
flex:1;
flex-direction:row;
}
div.checkbox-label{
flex:1;
font-family:Segoe UI;
background-color:lightgrey;
padding:10px;
text-align:center;
box-sizing:border-box;
}
div.checkbox-control{
flex:1;
font-family:Segoe UI;
background-color:white;
padding:10px;
text-align:center;
box-sizing:border-box;
}
div.field{
flex:none;
background-color:purple;
border: 5px solid yellow;
}
</style>
</head>
<body>
<div class="popup-body">
<div class="popup-form-container">
<div class="field">
<div class="popup-form-control-container">
<div class="checkbox-container">
<div class="checkbox-label">Hello world</div>
<div class="checkbox-control">
<input type="checkbox"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS FIDDLE: https://jsfiddle.net/4246r1f1/
Screen shots:
Chrome error (space)
Chrome ok (no space)
IE ok (space)
When you use flexboxes you need to understand which properties are for the container flexbox and which are related to child/items( check this article );
For ex. setting flex:1 on an item without a container display:flex doesn't make sense (found some of these in your code...)
Correcting these the .field doesn't overflow (tested on chrome and ff);
fiddle
Related
This question already has answers here:
Prevent flex items from stretching
(2 answers)
Closed 3 years ago.
In the following image, the button is taking the height of the flexbox? Why? I want it to be a regular button bottom-aligned with the image on the left (the white square).
index.css
.grid-container{
display:grid;
grid-template-rows:[nav-row-start]auto [nav-row-end logo-nav-row-start] auto [logo-nav-row-end content-row-start] auto [content-row-end];
}
.nav-style{
height:5vh; /*make nav div take 5% of space of viewport*/
background-color:black;
}
.logo-nav-style{
height:20vh;/*make logo-nav div take 20% of space of viewport*/
background-color:gray;
}
.nav-flexbox-container{
display:flex;
flex-direction:row-reverse;
}
.logo-nav-flexbox-container{
display:flex;
}
.content-style{
height:75vh;/*make content div take 75% of space of viewport*/
background-color:white;
}
#nav{
grid-row:nav-row-start/nav-row-end;
margin:0px;
}
#logo-nav{
grid-row:logo-nav-row-start/logo-nav-row-end;
margin:0px;
}
#content{
grid-row:body-row-start/body-row-end;
margin:0px;
}
#profile-pic {
margin:5px;
}
#mail-icon-pic{
margin:5px;
}
#stats-icon-pic{
margin:5px;
}
#logo-image{
/*the max width and max height rule will make the image fit inside the div. If the image is bigger than div, the image will
contract, if the image is smaller than the div, the image will expand*/
max-width:100%;
max-height:100%;
}
body{
margin:0px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Something</title>
</head>
<body>
<div class="grid-container">
<div id="nav" class="nav-style nav-flexbox-container">
<img id="stats-icon-pic" src="stats_icon.png">
<img id="mail-icon-pic" src="mail_icon.png">
</div>
<div id="logo-nav" class="logo-nav-style logo-nav-flexbox-container">
<img id="logo-image" src="example_logo.png">
<button type="button">Questions</button>
</div>
<div id="content" class="content-style">body</div>
</div>
</body>
</html>
The align-items flexbox property is set to stretch. See CSS tricks on flexbox.
Use this:
.logo-nav-flexbox-container{
display:flex;
align-items: flex-start;
}
I had to add align-items: flex-end rule
.logo-nav-flexbox-container{
display:flex;
align-items: flex-end;
}
I am creating my first real responsive layout and experiencing difficulties with css & clearfix. I made a JS fiddle (http://jsfiddle.net/brandrally/GFXP9/1/) demonstrating the problem with the code I created.
Basically I just want 'Line 1' and 'Line 2' to site beneath each other without a space. I plan to place quite a few divs inside the .line div's hence why I believe I need to clearfix them up.
CSS
div#content {max-width: 400px; min-width: 300px; margin:0 auto; }
div#left {width: 100px; background:#CCC; float: left; }
.line {border-bottom: 1px solid #000;}
div#right {background:#F63; margin-left: 100px;}
/* Clearfix */
.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
/* IE mac \*/
.CF { display:block; }
HTML
<div id="content" class="CF">
<div id="left" class="CF">
Left Content <br/>
Displayed<br/>
Demo<br/>
Problem.
</div>
<div id="right" class="CF">
<div class="CF line"> Line 1</div>
<div class="CF line"> Line 2</div>
<div class="CF line"> Line 3</div>
</div>
</div>
if you want to avoid clearing .CF with :after from #left you need to add overflow:hidden; to .CF.
.CF will not need the clearfix pseudo since overflow will do the job.
http://jsfiddle.net/GFXP9/5/
I think it's my lack of css knowledge, but i don't get this thing working. My purpose is to have a container div which have the MAXIUMUM witdh of 800px and aligned in the middle of the page, with one or two elements per 'row', depending on the available screen-space. But in the example you see that the whole 800px is taken. How to accomplish that the 800px is only the max?
HTML:
<div style="background-color:red;max-width:800px;display: inline-block">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
CSS:
.contentgedeelte {
width:310px;
background:white;
margin:10px;
float:left;
border-radius:5px;
padding:5px;
}
http://jsfiddle.net/plunje/LmJSy/
OK, here you go:
#container {
width:800px;
margin:0 auto;
text-align:center;
}
.row {
display:inline-block;
background:red;
margin:0 auto;
}
.contentgedeelte {
width:310px;
background:white;
margin:10px;
border-radius:5px;
padding:5px;
display:inline-block;
text-align:center;
}
You'll need to add a .row element to wrap your contentgedeeltes in pairs (if that's how you want them displayed). To be honest you're better off just calculating the widths properly, but if you really can't, try this. Also, I've taken your container element, remove the inline styling and added the ID #container.
Use display: block; instead of inline.
Inline-block is for elements which line up side by side, not for pagewraps. If this is a center of the page container there is no need to display inline.
If you want the articles to display as inline elements, that seems to work.
Or just tally your styles to add up to 400px instead of 340px.
You need a little more structure. See below.
HTML
<div class="container">
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
max-width: 800px;
background-color: red;
padding: 1em;
overflow: hidden;
}
.contentgedeelte {
width:48%;
background:white;
margin:1%;
float:left;
border-radius:5px;
padding:5px;
display: block;
}
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
How can I make an automatic horizontal scroll bar in my page if the content will overflow in its border.
<html>
<body>
<div style ="width: 20px; height:30px; border:1px solid black; overflow:auto">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>
What if the text in my content is too long, how can I make an automatic horizontal scrollbar?
change your code into this:
<html>
<body>
<div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>
Insert in the div style :
overflow-x:scroll;
overflow: auto;
white-space: nowrap;
http://jsfiddle.net/GCPDE/
Change your style to this:
style="width: 20px; height:30px; border:1px solid black; overflow:auto;"
Just a case of incorrect syntax.
NOTE: In order to make text horizontally scrollable you will have to add
overflow-x:scroll; overflow-y: hidden; white-space: nowrap; to your div.
<html>
<body>
<div style ="width:20px; height:30px; border:1px solid black; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>