most of my coding problems are usually solved very easily by searching on here (hence this is my first post) but for this one I just can't find an answer.
I've made a simple bootstrap grid using the w3 tutorials.
I have columns A, B, C. Column A has only 1 element (a google map), columns B and C have 4 rows each (let's call them B1-B4 and C1-C4):
What I have made (large screen)
When I resize the browser window such that it turns into a mobile size screen it shows just 1 column in the order of A, B1-B4, C1-C4.
What I get when I re-size
What I want is it to re-order the columns to A, B1, C1, B2, C2, ..., B4, C4
What I want when I re-size
If anyone has the solution, or can point me in the right direction I would be most grateful.
Thanks in advance.
You can't reorder columns in pure Bootstrap 3 without using a minimum of Javascript.
One workaround could be to have hidden columns at the cost of containing twice your data using hidden-sm, hidden-md, hidden-lg and hidden-xs classes to hide columns according to the device as explained here.
Complete Flexbox Guide
You can use flexbox ordering to set the order of your children elements however you like. So if you wanted A, B1, C1, B2, C2, you could set A to 1, B1 to 2, C1 to 3 and so on.
However lets say you had like an unknown / infinite number of items for B or C, you could wrap B and C in a flex container, and set the order there, and then inside that, set the order for individual items.
Even better, start using CSS Grid, the successor to flexbox. I don't have too much experience with CSS Grid, but it looks like you can define the order, just like flexbox.
CSS Grid by Example - Mozilla Developer Network
Related
I am trying to refamiliarize myself with CSS after a decade or two of being away.
The current challenge I am trying to solve is being able to display an alphabetized "list" of cards (hundreds of them) that sort top-to-bottom across multiple columns.
In a perfect world, I would like the column number to automatically adjust by the available width (cards will be fixed size)... and I would like the height of the grid/flex container to be responsive - based on how the items get distributed amongst the available columns.
In the attached image, I have an old HTML layout using TABLES and I had to manually enter where each item appeared, and in what column. If I added more items that begin with the letter "C"... then I needed to manually move the markup around so as to reflow the columns "evenly".
Old way using HTML Tables
I want the new way to be a "card" (for ease of explanation) for each pair of icons and label.
When I try using FLEX or GRID containers and set the flow to column, the ONLY way I can get the cards to flow to any additional columns is to set a fixed height of the container - which is the opposite of what I need. I would rather a solution (if it is possible) that will try to distribute all the cards across available colums and let THAT dictate the height... and have it responsively re-flow as the browser is resized.
So far, all searches have come up flat - no solution.
UPDATE/EDIT:
For example, I want the vertically sorted items to wrap into new columns equally until the last column has extra space, so maybe a list of a-thru-z might look like:
a h o v
b i p w
c j q x
d k r y
e l s z
f m t
g n u
If you drag the browser wider to allow for more columns:
a g m s y
b h n t z
c i o u
d j p v
e k q w
f l r x
or narrower...
a j s
b k t
c l u
d m v
e n w
f o x
g p y
h q z
i r
Height is dictated by the "equal" reflow of column contents amongst the columns
(Sorry for using the code snippet the wrong way)
But hopefully it clarifies my desire... which I fear is not possible.
EDIT #2:
I had already contemplated a semi-dynamic solution of just setting #media queries to change the container height based on screen width, but it's not a solution that factors in a change in amount of content or someone increasing browser font size that would grow the card sizes... it'd still be pretty hands-on manually adjusting for various widths and changes to content quantities.
I am using semantic-ui's grid, which is a sixteen column grid system. Initially, I am displaying multiple rows containing two eight-wide columns each. All of the columns are initially an equal height.
When initially rendering all of the columns, the user will see something that looks like this -- where each line is a row, and each column is a letter:
a b
c d
e f
g h
There is a user interaction that increases the height of a selected column. So if increasing the height of 'a', for example, the current behavior after increasing height will render something that looks like this:
a b
a .
a .
a .
c d
e f
g h
The increased height of 'a' will increase its row height so that the bottom of 'b' is above the bottom of 'a'. The columns in the bottom (last) row will always be aligned (unless increasing the height of 'g' or 'h', which are the bottom).
The desired behavior that I would like after increasing height of column 'a':
a b
a d
a f
a h
c
e
g
In other words, from a user's perspective for this case I'd like to push everything in the first column down but leave everything in the second column the same.
As I said, I am using semantic-ui so answers in relation to that would be great, but I am not sure how I would do this with bootstrap or other grid systems.
I am not interested in using jQuery Masonry. Perhaps thinking in terms of a grid layout for this is not correct, but I am curious if anyone has solved this problem in any simple ways that aren't coming to mind.
Here is a demo on jsfiddle:
https://jsfiddle.net/ne64wkmm/1/
I have run into an interesting situation in which I have two columns, and two divs within each column. The problem that I am having is that when I need to scale down the window to the mobile view, I need two divs from the second and third column to be interchanged.
Example (I'm using haml)
col-sm-8
%h1 "A"
%h1 "B"
col-sm-4
%h1 "C"
%h1 "D"
So basically this would look like this
AA C
BB D
But when I want to condense it, It looks like
A
B
C
D
And here is the thing, when I want this condensed, I want the columns to appear like:
A
C
B
D
Does anybody have any ideas on how to go about with this one?
You can accomplish this by faking it with pulling and pushing certain columns at different sizes. See http://getbootstrap.com/css/#grid-column-ordering. Basically, you will pull or push the columns at larger sizes but for mobile devices have no pushing or pulling and have the columns in the order that you want them to appear.
So the html page should be ordered such as A, C, B, D; then use pushing and pulling for sm or md and larger to arrange them as you please on larger screens. I am unaware if pushing and pulling more than 2 columns will work. If it does not, you could always make nested columns, such that A and C will be in their own new column and container and B and D will do the same but on the left side of the screen.
I have a typical FastReport report with a table inside of a MasterData band. The table is pretty lengthy and narrow, so I'm thinking about splitting it in half and placing the lower half next to the upper half like so:
A A D
B B E
C -> C F
D
E
F
There's a catch - rows on the table are 1-3 lines tall.
I have tried using MasterData.Columns property. Two problems with it are: it splits the table by-row, making it AB CD EF, which is not acceptable, also it does not account for row heights, so if for example row A is taller than others, then there's unwanted gap after D on the second column (despite the StretchMode = smMaxHeight).
My FastReport version is 4.7.
FastReport has two ways to make a column report.
You already discovered one of them "band columns" - this method prints band from left to right and then down.
The second way is a page columns.
With Page column FR prints band till the end of the page and then moves to next column. I think this method exactly what you are looking for.
To make a page columns just double click on the page in the report designer, select other options tab and set the number of columns you want to print.
So i have x amount of "blocks" that I want to float left.. Like this :
A B C D
E F G H
BUT, if B is twice as long as the rest, for example, there would be white space between A & E, C & G, D & H.
How can I avoid that and just have all the containers float to the left and then fit in nicely without excess white space in between ?
CSS cannot handle this in the general case.
If there are a fixed number of columns, you can cheat and do this: http://jsfiddle.net/suaaK/11/
Otherwise:
See this answer for a comparison of the candidate techniques, showing that they don't work:
CSS Floating Divs At Variable Heights
If you're willing to use JavaScript, you should use jQuery Masonry.
Demos:
http://masonry.desandro.com/demos/animating-css-transitions.html
http://masonry.desandro.com/demos/adding-items.html
Set up your CSS into vertical columns versus horizontals. Smashing Magazine has a great piece about floats and their quirks, go take a look: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/