I have a skinny list that I'm showing in a resizable panel. The items in the list itself are dynamic (not known before hand and generated using "ng-for" directive in angular).
The panel I'm showing the items in can be resized to pre-set which is a factor of some min-width. So let's say the min-width is 100px, the user can resize the panel to be 200, 300 or 400px.
The way I need to style it is a bit complex and I'm wondering if it's even possible.
If the panel is min width (100px) show the items in a single column with vertical scroll if list overflows max height (300px). (in the example below, you've to scroll to see the 3rd item)
|item1|
|item2|
|item3|
If the user resizes the panel and increases the width, on overflow, the items should start wrapping.
|item1| |item3|
|item2|
I was playing around with flex box and wondering if I can conditionally set the flex-wrap property.
I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
I have implemented layout calculation with the help of JS, that calculates each column and fills in each column with elements.
The basic idea is following:
calculate total height of all elements
split items into equal columns according to the height of each element (columns count depends on screen width)
items order does matter
"equal columns" means not exactly equal but approximately.
JS layout
I know that flexbox can fill in each column until flexbox reaches height limit for column, then flexbox starts filling in next column...
But I want "equal columns"...
My question is not about Why is the two p-tags not beside each other when the screen is wide? or Horizontal masonry layout with flexbox CSS only [duplicate], maybe something like How to split a nested navigation into columns with almost equal heights but without JS and without "column fill in limitation".
Is it possible to implement such behavior with flexbox and without JavaScript?
I'm trying to create a pretty basic layout with Bootstrap 3. I want one center column with a max width and two outer columns to fill up the rest of the space and I want it all to be centered.
Without the max-width on the middle column, everything is centered nicely, but when I add the max-width, white space appears on the right forcing the rest of the layout off-center.
Here is a Bootply showing the issue.
Is there a way to do this using Bootstrap rows and columns?
Thanks for the help.
In a two column template, how can we use background on each column repeated when height of both columns differ?
eg, if my column 1 height is 200px (after loading some dynamic matter) and column 2 height is 500px, column 1 background is shown according to 200px height and column 2 background is shown according to 500px but i want both columns' background to be 500px.
Note: heights may differ because of dynamic content that will be loaded.
Ah, equal height columns. You can find dozens of techniques online using JavaScript, CSS, images, etc., all with varying degrees of success.
I'm a fan of faux columns, where you have a single background image that is the width of both columns, and that image is tiled in a container element that surrounds both columns. Then the background will extend as far as the tallest column. Theoretically, this same technique can be used for two, three, or more columns.
The original article is on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), but the end result can vary a lot depending on your setup and structure.
Depending on other layout factors, an easy solution is to create a single background image that spans both, and set it as the background for the container element. That way, no matter which column has the vertically larger content, the background will span the entirety of it.
Of course, this really works best with fixed width layouts, etc.