I am using flex-mode and I would like a 'deck' of 'cards' that all have the same height and width, and the width to be consistent and based on different breakpoints. I have not found a way to do this, though. Whenever I add a card-deck class around a group of cards, they ignore any width set, whether with col-* classes or by setting a specific width on them.
This is the hierarchy I was trying to make work:
.row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4
And here is a codepen with what I was attempting to make work
The card-group and card-desk both use display: table (or display:flex when $enable-flex is set to true), so you should not wrap your cell into col-* classes to set their width. The col-* classes not only set the width but also float: left, see also: https://stackoverflow.com/a/35804749/1596547
For display: table the widths are is the result of the automatic table layout algorithm as implemented by the browser, see https://stackoverflow.com/a/21130851/1596547.
For display:flex you can set the flex-basis to a fixed width (with both flex-grow and flex-shrink set to 0) see https://stackoverflow.com/a/23794791/1596547
Related
I'm trying to leverage the css 'column-count' in combination with CSS padding, and and I'm observing that if I specify a column count of 3, the browser renders part of a fourth column if content doesn't fit. as shown below
Here is a JSFidle -> https://jsfiddle.net/w40jcykp/1/
I'm seeing this in Chrome & Edge. is this a known issue, or is there a workaround for this?
Thank you kindly.
The CSS below.
.newspaper {
column-count: 3;
min-height:144px;
height:144px;
padding:20px;
column-gap:10px;
border: 1px solid black;
overflow:hidden;
}
I think the issue here is that you've set a fixed height on your container. With the fixed height, the columns can't grow, so the rendering engine keeps making more columns to fit your content inside the container.
If you turn off overflow: hidden in your fiddle, you'll see that there actually a bunch more columns overflowing out of the side of your box. The padding just allows part of one of them to be visible.
The root cause here is height balancing. From MDN:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal. Firefox does this.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Since you've set the height, height balancing says that the browser will fix columns to that height, and will create as many columns as it needs to display your content.
You'll need to remove your fixed height if you want your columns to grow and flow correctly and obey your column-count property.
Applying the CSS rule display:flex to a Bootstrap row seems to take the control of Bootstrap column width away from Bootstrap. For example, if I have a column with the class col-md-9, it is only as wide on the Android Chrome browser as the width of the text it contains instead of occupying 75% of screen-width according to the Bootstrap grid rules.
What is the underlying cause of this behavior and how can it be avoided?
If you apply display:flex to a .row, the width of all its immediate children will no longer be controlled by their width property, so the block (Bootstrap) model will no longer work. Mixing Bootstrap 3 layouting classes (based on the block model) with display:flex (the flexbox model) is not a good idea.
In the flexbox model, if the flex-direction is not set, the first level children of the element with display: flex will have their width NOT influnenced by the width property, but by (not necessarily in this order):
child flex-basis,
child flex-grow
child flex-shrink
child content actual size (width)
child's siblings content actual size
parent align-items (if set to stretch)
child align-self. (if set to stretch)
There are quite a few properties, but it allows fine-grained control over any posible display scenario. Some of them will not apply to width if the flex-direction is set to column on the parent, as they will apply to height in that case.
By the way, Bootstrap 4 comes with flexbox, but it's not out yet.
I can't seem to keep my (dynamic width) table on the same line as a previous element and have it extend to it's parent container without exceeding it and overflowing. I don't want a horizontal scrollbar as the table should just break the lines and/or words up to make it more narrow.
However, it's not doing that.
jsfiddle
In the fiddle, the table overflows and extends beyond it's parent container's width. The parent container is using white-space: nowrap to keep it on the same line as the content next to it.
Why is it not sizing it's width correctly?
If I set a fixed width on the table, it works and sizes the width correctly, but I need the width of the table to be dynamic. Only the outermost containing div is fixed.
Any ideas?
If you add
.listInfoTbl {
[...]
max-width: 142px;
[...]
}
then you'll see everything is working. But you may wonder why is that?
The answer is that you set a certain width for your div.listPropertyDiv therefore it won't grow beyond this and additionally there's some padding to take into the formula:
innerWidth(.listPropertyDiv) = innerWidth(#left) - border(.listPropertyDiv) - padding(.listPropertyDiv) - margin(.listPropertyDiv)
innerWidth(.listPropertyDiv) = 397px
Therefore:
width(table.listInfoTbl) <= innerWidth(.listPropertyDiv) - width(img.listImage)
width(table.listInfoTbl) <= 142px
You should overthink having a fixed width on #left, if your thinking about dynamically changing the content's width because if the parent doesn't shrink it's children can't.
A fixed fiddle
But maybe this is what you're looking for a solution with max-width and percentage so objects can shrink accordingly.
I have a basic Bootstrap question regarding the grid system. When you use the standard grid and apply the container class your container width ends up being 940px by default. If I want my container to be larger do I then use the fluid grid system so my span classes expand to fill the entire container?
When you use a standard grid, the container, row and spans sizes are fixed (in pixels) and with a fluid grid that sizes are dynamic (in percentages).
As you said, container width is 940px by default in standard grid and 100% in fluid grid. It's not necessary to use fluid grid just to make your container larger, that depends of on your needs (if you need your design to be responsive or not). An easy solutions is just to override the width value of container class (.container) after the inclusion of bootstrap.css file.
.container {
width: 1024px;
}
Hope this helps!
EDIT: Also need to override span widths!
I've set up a JS fiddle of what I'm working with. http://jsfiddle.net/bjankord/2EKQv/
It seems if I add a height to one of the child elements of a parent with display:box set, all the other child elements stretch to that height. I don't know if this is how the display:box and box-ordinal-group properties are supposed to work, if so that's unfortunate. I was hoping to be able to reorder my html markup with CSS using box-ordinal-group when working on responsive web designs, but this height issues is killing me.
I am by no means a flexbox expert but from some quick testing I think you might need to change your layout to be three vertical columns and add box-orient:vertical to each of the parent elements. In order to have one child element taller than the others set the box-flex: property to 2 on your withHeight class and set the min-height of that class to 300px;
Fiddle:
So I messed with your code a bit. I added a parent container with box-orient:horizontal to line up the three columns and gave each column box-orient:vertical. This seemed to fix the issue with height not being respected.
http://jsfiddle.net/mdJ2L/1/