I'm using Bulma for column management, and it has a is-multiline class that can be used to allow columns to wrap. However, I'm not using this class, but my columns are still wrapping.
Expected Behavior:
Two columns are always side-by-side, on the same row
Actual behavior:
At certain viewport widths, the second column goes below the first column instead of beside.
Question
If you're familiar with Bulma, would you mind taking a look at this simple example and letting me know if I'm doing something obviously wrong? Thanks so much!
HTML
<div class="body">
<div class="columns">
<div class="column row-name is-narrow">
Row 1
</div>
<div class="column row-cells">
Some data
</div>
</div>
</div>
CSS
.body {
width: 600px;
background-color: #000;
margin: 0 auto 0;
}
.row-name {
background-color: #ffff0088;
width: 50px;
}
.row-cells {
background-color: #ff000088;
}
A JSFiddle: https://jsfiddle.net/8ggyagxp/10/
It turns out if Bulma detects that your viewport is mobile sized, it will stack columns unless the is-mobile class exists on the columns. See here for more information.
Related
I am using Zurb Foundation 6. I have a row with 2 columns, as such:
<div class="row">
<div class="columns medium-4 left-col">
Left column.
</div>
<div class="columns medium-8 right-col">
Right column. Needs to reach far right hand side of screen.
</div>
</div>
Naturally, Foundation .rows have a max-width of 75rem, meaning there will be margins either side if the screen is larger than 75rem. That's fine, I want to leave that. However, I want the right side column to extend all the way to the right, passed that 75rem width.
In other words, I want to try and have the left column behave like its within a max-width: 75rem; wrapping row, but the right column to behave like it's in a max-width: 100%; wrapping row.
See here for more info: https://jsfiddle.net/u4x5owc0/11/
Is there a way I can achieve this (with Foundation)?
I've tried making the right column position: absolute; width: 100%; but that just covers the left side as well.
Would anyone know if this is possible and if theres a way to do this?
I don't think foundation has this feature but using position: absolute; right: 0; on the right column worked for me.
Updated fiddle
You should use .right-col{position: absolute; right: 0;}. But it won't support for small devices. You should use #media query for responsive. Please check DEMO it's working fine with responsive.
.left-col, .right-col {
height: 40vh;
color: white;
margin-bottom: 20px;
}
.left-col {
background: green;
}
.right-col {
background: red;
}
#media(min-width:640px){
.right-col{
position: absolute;
right: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="columns medium-4 left-col">
</div>
<div class="columns medium-8 right-col">
Needs to reach far right hand side of screen. ==>
</div>
</div>
<div class="row expanded">
<div class="columns medium-4 left-col">
Needs to remain the same width as above.
</div>
<div class="columns medium-8 right-col">
</div>
</div>
I'm trying to create a grid layout based on flexbox:
.container {
width: 360px; /* Try to change this. Possible values: 240px, 360px, 480px.*/
background: #eee;
display: flex;
flex-flow: row wrap;
margin: 0 -10px;
}
.cell {
box-sizing: border-box;
padding: 10px;
flex: 0 0 120px;
max-width: 120px;
}
.cell.wide {
flex: 1 0 120px;
max-width: 240px;
}
.inner {
background: red;
height: 100px;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.wide .inner {
background: blue;
}
<div class="container">
<div class="cell">
<div class="inner">1</div>
</div>
<div class="cell wide">
<div class="inner">2</div>
</div>
<div class="cell">
<div class="inner">3</div>
</div>
<div class="cell">
<div class="inner">4</div>
</div>
<div class="cell wide">
<div class="inner">5</div>
</div>
<div class="cell">
<div class="inner">6</div>
</div>
<div class="cell wide">
<div class="inner">7</div>
</div>
<div class="cell">
<div class="inner">8</div>
</div>
<div class="cell">
<div class="inner">9</div>
</div>
<div class="cell">
<div class="inner">10</div>
</div>
<div class="cell">
<div class="inner">11</div>
</div>
<div class="cell wide">
<div class="inner">12</div>
</div>
<div class="cell">
<div class="inner">13</div>
</div>
</div>
This JSFiddle helps to illustrate my problem.
A container element .container can contain any number of cells.cell. There are two types of cells: a regular one with a fixed width (the red ones in the jsfiddle) and a wide one .cell.wide (the blue ones) which are twice as wide but could shrink to the width of the regular cell if there is not enough space in the current row. Each row must be filled completely.
So in the example (see fiddle):
Cell #2 should be wide and push #3 to the next row.
In the second row, which then contains #3, #4 and #5, cell #5 should stay small, because there's no space for a larger cell and rows should be filled completely.
etc
By the way: The grid container is of variable width and rows can therefore contain between two and four cells. You can try this out in the fiddle by changing to width to the specified possible values.
After trying around in the fiddle for the whole morning and trying numerous combinations of the flex, width, min-width and max-width properties I definitely need you help! Thanks in advance!
I already have a Javascript workaround (counting columns and adding classes) but would much prefer a CSS-only solution.
I believe the answer is that what you're looking for is not possible with Flexbox. The reason is that the sizing algorithm (in simplified terms) uses a couple of steps to determine the actual size of the element:
Determine the preferred minimum size (the value of flex-basis if set to a length/percentage, the value of main axis size if declared to be auto, and min-content size if not). In your case, both .cell and .cell.wide prefer 120px.
Place items as if they had the preferred size.
Evaluate each resulting line (in a wrapping flex flow) and determine any remaining space.
Distribute remaining space (per line) according to flex-grow.
In your case, this means that each item (regardless if .wide or not) will evaluate to a preferred size of 120px, and thus fits 3 items on each row. At this point, the flex-grow factor does nothing, as there isn't any space left to grow, so the fact that .wide items have a flex-grow of 1 is irrelevant. I think your example would require a form of "sometimes min-width, sometimes not" behavior that flexbox just doesn't do — there would be too many layout passes for the browser to do (e.g. reflowing into lines several times etc).
The only CSS-based solution I can think of is to hardcode all the possible scenarios in something akin to "Quantity Queries", but that would get unwieldy fast...
Closest I can get with flexbox is something like https://jsfiddle.net/qde5xq09/1/.
I'd like to create single row with two overlapping columns like that:
.row
.col-sm-7
.col-sm-6
so that 6th column of the grid is overlapped.
It's partially possible with a .col-sm-pull-1:
.row
.col-sm-6
.col-sm-6.col-sm-pull-1
but the 12th column becomes empty. I tried:
.row
.col-sm-6
.col-sm-7.col-sm-pull-1
but the second column moves to the next row.
I found the answer for Bootstrap 2 (How to overlap columns using twitter bootstrap?). Is it possible with the Bootstrap 3?
After seeing your image example, I think perhaps this is what you are looking for. (I made them overlap 2 columns because that will center it better)
.blue{
background-color: rgba(0,0,255,0.5);;
}
.row .red{
background-color: rgba(255,0,0,0.5);
position: absolute;
}
.red, .blue {
height: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="red col-xs-7"></div>
<div class="blue col-xs-7 col-xs-push-5"></div>
</div>
</div>
Fiddle If you want to overlap the two columns in one row, you'll need negative margins. The bootstrap gutters/margins are layed out using positive and negative margins. I would recommend ids for the columns and then you can use z-index if you want one over the other one.
So change right margin on first and left margin on the second.
margin-right: -5%;
margin-left: -5%;
How the grid works is a great reference for how its built.
You need to place the new column under the same div as the one you want to overlap.
Here is an example
<style>
.first {
background-color: #dedef8;
border: solid black 1px;
}
.second {
background-color: #dedef8;
border: solid black 1px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7 first">
<p>This is the first column</p>
<div class="col-xs-6 second">
<p>This is the second </p>
</div>
</div>
</div>
</div>
</body>
Here's a jfiddle example: http://jsfiddle.net/NachoSupreme/o0fs78fv/
I am struggling solving a problem with a multi-column setup.
Given a simple setup of three columns I want to adjust the padding so that each gap between the columns is of the same size (2rem). But, the tricky part: I want to be able to use the same rules for 2, 3, 4 or even 5 columns.
I am using PureCSS to create the multi-column setup itself. Knowledge of this framework should not be necessary though, as my problems don't have to do with it.
At the moment there is the following markup:
<div class="pure-g">
<div class="pure-u-1-3"><div class="myblock">content col 1</div></div>
<div class="pure-u-1-3"><div class="myblock">content col 2</div></div>
<div class="pure-u-1-3"><div class="myblock">content col 3</div></div>
</div>
Each column is of 33.333 % width, of course. To create the gap in between, my idea is to use an inner wrapper for each column, that pushes it's content away from the sides.
<div class="pure-g">
<div class="pure-u-1-3 col">
<div class="col-wrapper">
<div class="myblock">content col 1</div>
</div>
</div>
<div class="pure-u-1-3 col">
<div class="col-wrapper">
<div class="myblock">content col 2</div>
</div>
</div>
<div class="pure-u-1-3 col">
<div class="col-wrapper">
<div class="myblock">content col 3</div>
</div>
</div>
</div>
Now I give the .col-wrapper some padding. But here's where I can't figure out a clean solution that works for all column counts. My idea is:
.col > .col-wrapper {
padding-left: 1rem;
padding-right: 1rem;
}
/* Overwrite padding for an exact left alignment */
.col:first-child > .col-wrapper {
padding-left: 0;
}
/* Overwrite padding for an exact right alignment */
.col:first-child > .col-wrapper {
padding-right: 0;
}
But given this CSS, the first and the last columns are always of different size than the rest, as they have 1rem less padding.
Next idea was, to adjust it a bit further and this is nearly perfect, but it causes the first/last and other gaps to differ.
.col > .col-wrapper {
padding-left: .67rem;
padding-right: .67rem;
}
/* Overwrite padding for an exact left alignment */
.col:first-child > .col-wrapper {
padding-right: 1.32rem;
padding-left: 0;
}
/* Overwrite padding for an exact right alignment */
.col:first-child > .col-wrapper {
padding-right: 0;
padding-left: 1.32rem;
}
And here I am stuck. How would you adjust it to create even gaps?
Thanks for your help :-)
I am using PureCSS to create the multi-column setup itself. Knowledge
of this framework should not be necessary though, as my problems don't
have to do with it.
Your problem is related to the use of purecss in that you are constraining yourself to finding a solution starting from columns set at fixed percentages.
You could easily achieve equal width columns without using purecss and use flexbox instead (see example http://codepen.io/imohkay/pen/gpard).
<div class="equalHMWrap eqWrap">
<div class="equalHM eq">boo <br> boo</div>
<div class="equalHM eq">shoo</div>
<div class="equalHM eq">clue</div>
</div>
css
.eqWrap {
display: flex;
}
.equalHMWrap {
justify-content: space-between;
}
.equalHM {
width: 32%;
}
I am not sure if there is a solution possible using the same rules for different number of columns while keeping with purecss. The percentage of padding for left, right, first-child and last-child would always be changing depending on the number of columns in use. But you could calculate it for each scenario and add css rules as applicable.
I need to split window in to the 2 horizontal divs by height:50%; width:100%:, is it possible with bootstrap? Tried like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="border:1px solid red">
1
</div>
<div class="col-lg-12" style="border:1px solid red">
2
</div>
</div>
</div>
With green matched how it should be...
Just a suggestion calculate the height of the .row div dynamically using javascript. CSS height:50% will only work if the parent div is given some height.
EG: .row{ height:500px; } will work fine.
But calculate this height using jQuery function $(window).height().
Assuming this is your only markup you can give each parent element a height of 100%:
body,html {
height: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.col-lg-12 {
height: 50%;
}
DEMO
Not sure why you would need to have 2 boxes with no content containing set heights?
Surely the rational thing to do is fill it with content first, then add padding to your divs to make the design the way you want it.
Adding heights to an empty div is asking for trouble early in your build stage.
Simply add 1 x id to each col-lg-12 as shown below:
<div class="col-lg-12" id="topContent" style="border:1px solid red">
1
</div>
<div class="col-lg-12" id="bottomContent" style="border:1px solid red">
2
</div>
Now when you finished adding content simply reference the ID and add padding top or bottom to your id and you will find it is a lot simpler to code going forward. Trying to mess with set heights early really is looking for problems if going responsive.