In this sample all the columns share the same height:
http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
In my sample: http://codepen.io/helloworld/pen/ogrjML
The same css code does not produce the same output of same height columns.
What do I wrong?
I can not use Flexbox!
<div class="container">
<div class="row">
<div class="row-same-height row-full-height">
<div style="background:orange;" class="col-xs-9 col-xs-height col-full-height">
<div class="item">
<div class="content">
<br><br><br><br><br><br><br>
</div>
</div>
</div>
<div style="background:red;" class="col-xs-3 col-xs-height col-full-height">
<div class="item"><div class="content">test2</div></div>
</div>
</div>
</div>
</div>
There are some styles in the minimit example that are not included in bootstrap. You need to add the following to get the heights you desire:
.row-same-height {
display: table;
width: 100%;
}
.col-xs-height {
display: table-cell;
float: none;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
Demo
Related
I'm trying to achieve this, where brown gets pushed down when pink is too long, and pink is dynamically sized based on its text content.
I was only able to achieve this using javascript and two templates, if pink length is over X use second template, but I'm wondering if there's a way to achieve this using CSS only?
I tried meddling with grid auto-fill/auto-fit with minmax, float, flex with wrap, but I couldn't get to the desired result with these.
.parent {
width: 170px;
}
.flex {
display: flex;
}
div {
outline: 2px solid rgba(255, 0,0, 0.3);
}
<div>
<p>scenario A</p>
<div class="parent flex">
<div>
<div class="one">A short title</div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
<div>
<p>scenario B</p>
<div class="parent">
<div class="one">Testing a very long title</div>
<div class="flex">
<div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
</div>
<p>can a component achieve both a and b with only css?
I found a solution, it requires having fixed height in the first row, and the right side button will basically overflow when needed.
Will wait a bit before accepting my own solution in case someone came with a better one.
.container {
width: 300px;
display: flex;
gap: 10px;
padding: 16px;
font-size: 14px;
font-family: Arial;
}
.text {
flex: 1;
min-width: 0;
}
.first-row {
height: 22px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.image {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #444;
}
.title {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>Long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test title test title</div>
<button>Visit store</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Short title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Short title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Very long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test titleTest title test titleTest title test title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
In my code,
Within one container Three blocks will be there. one freezes on the left and one freezes on the right and the other will scroll in between these two divs. Just like modern grids. But I don't want to use the grid.
I have tried, but the center block is not getting the Horizontal scroll.
I want no breakage of the center block, instead, it should scroll horizontally.
* {
box-sizing: border-box;
}
.container {
width: 100%;
overflow: auto;
white-space: nowrap
}
.scroll-center {
width: auto;
overflow: auto;
display: block;
white-space: nowrap
}
.row {
float: left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
<div class="container">
<div class="row">
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
<div class="scroll-center">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
You probably need to add width to your container. Right now it's set to 100% so it will not size beyond the browser window. Instead you could do something like this:
.container {
overflow: auto;
white-space: nowrap;
width:2000px;
}
I realize that you may need to change this value dynamically but hopefully this gets you started
Example:http://codepen.io/nilestanner/pen/jAjbdK
Try with For example:
css:
* {
box-sizing: border-box;
}
.left, .center, .right{
float:left
}
.center {
width:400px;
overflow: scroll;
display: block;
white-space: nowrap
}
#center-scroll{
width:2000px;
}
.center .row{
display:inline-block;
width:33%;
}
.center .row .cell{
min-width:100%;
}
.row{
float:left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
HTML
<div class="container">
<div class="left">
<div class="row" >
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
</div>
<div class="center">
<div id="center-scroll">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
I want to place a png as a background image for a div that acts as a placeholder:
https://jsbin.com/hohegiyazu/edit?html,css,output
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" rel="stylesheet">
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.placeholder {
background-image:url(/images/placeholder.png);
background-size:100% 100%;
height:50px;
flex:1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
</div>
</div>
</body>
</html>
I get this effect:
The image is distorted according to the width of the element and the left and right margins are not equal.
I want to achieve this effect:
Is it possible?
One way is to change your background-size property to cover
.item {
background-size: cover;
}
It will make sure the image cover the full background, without stretch, though this still depends a lot on how the image actually looks like as well as how the element using it is set up.
Update after question edit
With positioning, i.e. center center, you can control what part of the image is of more value and have it centered or left aligned or ...
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.placeholder {
background: url(http://placehold.it/300) center center;
background-size: cover;
height:50px;
flex:1;
margin: 1px;
}
<div class="container">
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
</div>
</div>
Update after 2:nd question edit
You can use a pseudo element, no extra markup, with background color and rounded corners. This will save you the extra http request, load the page faster (which is really recommended) and you can easily change color and border.
And you can use an image if you really need one
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.placeholder {
position: relative;
height:50px;
flex:1;
margin: 1px;
padding: 5px;
color: red;
}
.placeholder::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 14px;
z-index: -1;
background: lightgray;
/* with image
background: url(http://placehold.it/300) center center / cover;
*/
}
<div class="container">
<div class="row">
<div class="placeholder">Hey, there</div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<div class="row">
<div class="placeholder"></div>
</div>
</div>
The reason for this is that your PNG seem to include the white margins. So when you stretch it horizontally, the margins are proportionally stretched too and therefore become bigger.
I think you should use the border-image property as described here: https://css-tricks.com/understanding-border-image/
That way, you will be able to define which part of your image can be stretched and which part remains the same width/height, allowing you to keep corners and margins as you want them.
Why nested .row takes height of parent .row?
Example:
<div class="container">
<div class="row"> <!-- Parent .row -->
<div class="col-md-8">
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="row"> <!-- nested PROBLEMATIC ROW -->
<div class="col-md-12">
Why this row has height of 300px instead of 150px?
I can solve problem by setting 'clear: both' on that
row, but class .row should do it by itself.
</div>
</div>
</div>
<div class="col-md-4">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
With some dummy css:
.col-md-8 {
height: 500px;
background: #f0f0f0;
}
.col-md-6 {
height: 150px;
background: red;
}
.col-md-3 {
height: 150px;
background: blue;
}
.col-md-12 {
height: 150px;
background: yellow;
}
.col-md-4 {
height: 500px;
background #f0f0f0;
}
.col-md-4 > div {
margin-bottom: 10px;
height: 150px;
background: green;
}
Final output:
JS Bin : http://jsbin.com/nugoziju/1/edit
To begin with, you shouldn't be putting 'col's inside 'col's in Bootstrap without the corresponding row. So your markup looks like this:
<div class="container">
<div class="row"> <!-- Parent .row -->
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row"> <!-- nested PROBLEMATIC ROW -->
<div class="col-md-12">
Why this row has height of 300px instead of 150px?
I can solve problem by setting 'clear: both' on that
row, but class .row should do it by itself.
</div>
</div>
</div>
<div class="col-md-4">
<div></div>
<div></div>
<div></div>
</div>
</div>
And then that's fixed. That row is 150px tall.
Updated jsbin: http://jsbin.com/nugoziju/7
I am trying to create a 4x4 array of content using css tables. The cells should be evenly sized. I got a fix to a problem with the cells going out of the parent div. However that broke the height of the cells.
What is wrong here? All the rows should be 25% of the container, with the cells inheriting that. What seems to happen is the first row grows as much as it can, and the 3 remaining ones scale according to the content... Why?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body {
display: block;
height: 100%;
width: 100%;
}
div {
display: block;
}
#container {
background-color: #CCF;
position: absolute;
height: 100%;
width: 100%;
}
.sideBySide {
position: absolute;
float: left;
top: 0px;
height: 100%;
}
#galleria {
background-color:#0C0;
left: 0px;
right: 300px;
width: auto;
}
#tagit {
background-color: #099;
right: 0px;
width: 300px;
}
#table {
position: absolute;
display: table;
height: 100%;
width: 100%;
}
.table-row {
position: relative;
display: table-row;
width: 100%;
height: 25%;
}
.table-cell {
position: relative;
display: table-cell;
height: 100%;
width: 20%;
padding: 20px;
}
.kuva {
position: relative;
width: 100%;
height: 100%;
margin: 10px;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="galleria" class="sideBySide">
<div id="table">
<div class="table-row">
<div class="table-cell">
<div class="kuva">
Kuva1
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva2
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva3
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva4
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
Kuva1
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva2
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva3
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva4
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
text
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
test
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
</div>
</div>
</div>
<div id="tagit" class="sideBySide">.</div>
</div>
</body>
</html>
just keeping everything in the flow and dispatching display table/table-row/table-cell to different levels you can get to something like this :
http://codepen.io/anon/pen/pvDwk
To get rid of scrollbar when table can feet window do not forget to add body{margin:0;}