At some viewport I want to be able to swap some of the divs as shown by the figure below.
I don't want to use workaround such as replicating the same divs here and there and then using display:none to hide them, so please don't suggest this solution unless you think it's the only way to achieve so.
How would you solve this problem using Flexbox? What would the box model be like?
What I've tried so far:
playing with order CSS selector. But it works only if all the divs are in the same container (doesn't seem to work with this problem).
A1 and A2 are visually a single item, as suggested by its colour, but I guess I might need to split it in 2
PS: please note that the problem is NOT how to build any of these layouts themselves neither how to use media queries.
Related
I've been pondering this ever since I started using Bootstrap 3 - which is a fantastic framework by the way. What I'm describing may be completely the wrong way to go about this or it may be a very common issue and I'm interested to see how other developers & designers handle this.
The image below contains a simple row (white box) in a container. The row has a col span of 10 with an offset of 1 and the blue box is then inside a nested row of the white box. When the designer does this they will simply be keeping everything matching up to the nice full width container grid (because they won't understand or need to know how nested rows work).
However, the reality in Bootstrap 3 is the 12 grid starts again inside the nested row. The result of this means I can no longer line up the blue box nicely as it doesn't fit the nested grid.
So my question is: how do others handle this? Am I actually using nested rows in a way I shouldn't be or is this something that the designer needs to be educated on? Or is there something much easier that I'm now aware of :)
Thoughts?
After doing some more investigation I have just realised that I don't think this is an issue at all. What my example above is ignoring is that the gutter remains the same width in nested rows as in the outer rows. When I did in above images (and with how I always thought about it) I simply resized the grid in Photoshop which also resized the gutters - which is incorrect.
I've tried now using this cool tool http://gridpak.com/, created the grid to the same width as my nested row and, lo and behold, it lined up perfectly.
The columns in the nested rows will be different still but the result will match up with the original design. In the example above, the blue box will actually be a col span of 8 with an offset of 2. The designer will look at the site and "think" it is actually a col span of 6 but we will all know better.
Thanks for the ideas and suggestions everyone - especially to royalsflush for the neat jQuery tool he developed as that might still come in handy.
Indeed, the 12 grid system may cause difficulties in some cases when you have fixed directives from your designer, but there are all kind of tricks that you can do in order to succeed.
So if you want to align the blue block to be on center and a width of 6 cols, you can just use col-lg-offset-3 col-lg-6 classes and don't use it inside that white block, or if you use it inside that white block you can set this classes col-lg-offset-2 col-lg-8 and change the left and the right padding from 15px to 45pxlike you can see in this example (code here).
As you can see, everything is possible in bootstrap, you just have to change the left and right padding and you can create any type of layout you need.
I guess, it's because you did this whole thing in a <div class="container"> so the grid went according to this block. Just remove the <div class="container"> and the inner blocks will snap to the 'main' grid. Play a little with classes and offsets and it will look like in the first picture.
I found a couple of variations of your question, mainly because I had the same problem a while ago - maybe one of the answers to those can help you out:
Bootstrap 3 nested grid not reset to 12
Prevent bootstrap 3 from resetting nested grids / use master grid
I'm going to create a horizontal grid layout with CSS. (And I'll make it to scroll horizontally by JQuery and this solution. Please note that scrolling is not my problem. my problem is about creating the grid)
This is an example:
I have searched the internet about CSS Grids, but it seems that they can't help me...
My Question is, how to create something like the image above? Which plugins, or css properties should I use for this purpose?
EDIT: I want to have fixed number of rows (I mean, the number of rows should not change when I resize the page. there should be an scrollbar instead.) (I will use it inside a div with overflow: auto)
display:table, display:table-row, display:table-cell, display:inline-block
These css properties can help, just look them up on your local css information site.
The table-values let every element behave like a table, without actually using one. This may be a good solution for your problem.
The inline-block-value solves the overhang problem some floating layouts have as the blocks are displayed inline, just like imgs. There is little support for this in old browsers, of course.
I'm currently working on a UI that requires that I have a table with cells whose text is read vertically instead of horizontally. To do this, I am using CSS rotate transforms.
The problem I am running into is that the content is being measured before the render transform is taking place. This is causing my table to render incorrectly, giving wide columns instead of narrow ones.
Is there any way to fix this behavior with either css or javascript?
JSFiddle
Check this out: http://jsfiddle.net/c29rr/
I don't know if it will work in your case since it uses float:left to make the cells behave as divs but it's a start.
Not the best solution, but here's what I came up with: http://jsfiddle.net/gJCtN/2/
Also, vertical-align is not supported by elements without display:table-cell or something like it. More info.
Maybe this has already been answered and I am searching incorrectly, but here is my problem. I have an MVC project where the view needs to look like a table. So, I am using a div with spans inside of it. My problem is that I need the data inside to be vertically centered. When I set my display to inline-block I cannot vertically align because some of the data may wrap and become two lines. So, this throws out using line-height. Then I tried to make my span display values to be table-cell. This works and I can use vertical-align:middle, however then I am unable to set a fixed width. And, I need this to look like a table, so the fixed width is required or else it looks horrible.
Here are my attempts thus far, and I know the css needs cleaned up, but I would rather fix this first atm.
http://jsfiddle.net/Scorpionb/ukMfX/ (The scrollbars cause the entire row to misalign)
http://jsfiddle.net/Scorpionb/QzFc3/(white-space:normal; and removed overflow to get rid of the scrollbars)
http://jsfiddle.net/Scorpionb/H6ATy/ (trying to treat it as a table)
Hopefully this makes sense, but I have run around so many circles now that I am losing track of what works and what does not. So, ask if you have any questions.
Also, this is an ASP MVC project, so I am tying each row of data to a form to be submitted and bound to a model
You should really be using tables for tabular content.
You might also benefit cleaning up your CSS by using shorthand CSS. Some useful ones to get you started:
font
border-width
I am faced with getting a rather complex web app to work in HTML/CSS. I am finding many issues with the flexbox, which seems like it would solve my problems. I'm trying to understand what I'm doing wrong or what the flexbox limitations are. I am only working in Chrome so that helps.
I keep seeing two issues:
- the boxes don't understand how to accommodate heights/widths of children contained inside
- child boxes aren't contained by parents. Image of this issue:
Instead of posting code here is a JSFiddle: http://jsfiddle.net/dex3703/ryCQq/
Isn't fully complete but you get the idea I hope. The CSS is combined from three different files.
Thanks!
Figured it out. All containers must be set to display: box (or -webkit-box, etc). If you want a box inside a box, they all must be boxes. Hope this helps someone!