I'm creating a bootstrap responsive app to work on both desktop and mobile. I'm struggling to get one of my pages to display as-desired in both formats. I'd like it to look like the diagram below, but collapse to a single column with cells in the order of the numbers (1,2,3,4).
+------------+ +---------------+
| | | |
| | | |
| | | 2 |
| | | |
| 1 | | |
| | +---------------+
| | +---------------+
| | | |
+------------+ | 4 |
+------------+ | |
| | +---------------+
| 3 |
| |
+------------+
Right now, it looks like the diagram below:
+------------+ +---------------+
| | | |
| | | |
| | | 2 |
| | | |
| 1 | | |
| | +---------------+
| |
| |
+------------+
+------------+ +---------------+
| | | |
| 3 | | 4 |
| | | |
+------------+ +---------------+
which can be achieved using this code:
<div id="firstrow" class="row">
<div class="col-sm-8">
...
</div>
<div class="col-sm-4">
...
</div>
</div> <%# End firstrow %>
<div class="row">
<div class="col-sm-8">
...
</div>
<div class="col-sm-4">
...
</div>
</div> <%# End secondrow %>
I can get the desktop format right if I just use two columns, but then it would not collapse in the order I want (would be 1,3,2,4). I thought removing the "row" divs might help, but that appears to yield the exact same desktop format result.
Any thoughts on how this can be achieved, either using bootstrap (preferred) or custom CSS?
Cheers,
-Hamish
Related
Is there any way to create a layout like this by plain css maybe via flex-box, css-grid or anything except JS:
+--------------------------+ +---------------+
| | | sidebar |
| | | container |
| | | with border |
| | | +-----------+ |
| | | |sidebar | |
| | | |card #1 | |
| | | | | |
| | | | | |
| main content | | +-----------+ |
| of various | | +-----------+ |
| height | | |sidebar | |
| | | |card #2 | |
| | | | | |
| | | | | |
| | | +-----------+ |
| | | +-----------+ |
| | | |sidebar | |
| | | |card #3 | |
| | | | | |
| | | | | |
| | | +-----------+ |
| | +---------------+
| | not enough space
| | for one more card
+--------------------------+
+--------------------------------------------+
| "sidebar" continues here, with border and |
| this header |
| +-----------+ +-----------++-----------+ |
| |sidebar | |sidebar ||sidebar | |
| |card #4 | |card #5 ||card #6 | |
| | | | || | |
| | | | || | |
| +-----------+ +-----------++-----------+ |
| +-----------+ +-----------+ |
| |sidebar | |sidebar | |
| |card #7 | |card #n | |
| | | | | |
| | | | | |
| +-----------+ +-----------+ |
| |
+--------------------------------------------+
So cards warping around the main content first from right side, and then from bottom, if main content have various height, whole difficulty that right "real" sidebar, should contain a maximum number of cards, but its height should be less than content container.
I tried making your layout in a simple way, using limited and vanilla CSS. The grid is responsive and I tried to make the names somewhat follow the Bootstrap guidelines.
.col {
position: relative;
float: left;
color: white;
}
.col-9 {
width: 75%;
}
.main {
min-height: 200px;
background-color: red;
}
.col-12 {
width: 100%;
background-color: red;
}
.sidebar .col-12 {
width: 100%;
background-color: green;
}
.col-3 {
width: 25%;
background-color: green;
}
.col-4 {
width: 33%;
background-color: blue;
}
<div class="main col col-9">
<div class="col-12">main</div>
</div>
<div class="sidebar col col-3">
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
Working fiddle example
I have a very large QToolButton with an icon and text under each other.
Instead of it being displayed like this:
|-------------|
| |
| |
| |
| <image> |
| text |
| |
| |
| |
|-------------|
it is displayed like this:
|-------------|
| <image> |
| |
| |
| |
| text |
| |
| |
| |
|-------------|
Is there a way to center them both vertically together, besides creating a custom layout for it and adding the image, text and QSpacerItems manually?
The following result would be suboptimal, but still much better than the original:
|-------------|
| |
| |
| <image> |
| |
| |
| text |
| |
| |
|-------------|
same as title, i want css ul li look like this:
--------------------------
| | |
| | |
| Block 1 | |
| | |
| | |
------------| Bloc 2 |
| | |
| | |
| | |
| Block 3 |-------------
| | |
| | |
| | |
------------| Block 4 |
| |
| |
| |
--------------
how i can do that? some body can help me?
I think what you are looking for is a jquery grid plugin. There are tons out there.
This is just an example from the first google results: http://gridster.net
I am designing a webpage that requires at least three DIVs and possibly one container DIV. I need one DIV on the left, one in the middle, and one on the right. It seems simple enough but I also need the two side DIVs to underlap the middle DIV.
+-----------------------+
+-----------------------|-----+ +---------------------------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | o | | |
| | | v | | |
| | | e | | |
| 50% width | | r | | 50% width |
| | | l | | |
| | | a | | |
| | | y | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+-----------------------|-----+ +---------------------------+
+-----------------------+
I saw this from a another StackOverflow answer, but I can't seem to translate it horizontally: http://jsfiddle.net/PWwQM/1/
Please help.
The trick is to use the float property to get the outer divs side by side: float:left; I think this is what you want, anyway:
http://jsfiddle.net/SuTLq/
Your diagram shows a gutter between the outer divs, but I didn't create one since you write that the outer divs are each 50% of the width.
Its easy just use position absolute for middle one.Check this fiddle.
Picnik's left hand menu:
http://www.picnik.com/app#/create/shapes
Basic features:
Accordion like components (but multiple items can be selected)
Each stack has multiple child stacked
The whole menu resizes depending on how many stacks are selected and a scrollbar is also shown if necessary
So how Do I go about creating a menu like this? Any pointers to boot?
Thanks!
You might try a combination of VBox, collapsible panels and lists ( http://hasseg.org/blog/?p=113 ) That should give you all the tools you need.
My Vision of it: (cause I like drawing with pipes and dashes)
VBOX-------------------------
| |
| Collapsing Panel-------- |
| | | |
| | Tile List---------- | |
| | | | | |
| | | Tile | | |
| | | Tile | | |
| | ------------------ | |
| ----------------------- |
| |
| Collapsing Panel-------- |
| | | |
| | Tile List---------- | |
| | | | | |
| | | Tile | | |
| | | Tile | | |
| | ------------------ | |
| ----------------------- |
| |
| Collapsing Panel-------- |
| | | |
| | Tile List---------- | |
| | | | | |
| | | Tile | | |
| | | Tile | | |
| | ------------------ | |
| ----------------------- |
----------------------------