I'm trying to make a form more responsive to handle smaller browsers. Currently, we're using bootstrap to help with the layout but I am not adverse to other alternative solutions. In this particular view, we have two columns each with varying amounts of data. The trick is the group in the upper right needs to stay at the top of the page regardless of whether we are rendering this in one column or two. The groups below the upper right section should flow below any groups from the left hand column. Here's an illustration of what we are trying to achieve:
2-column:
L1 R1
L2 R2
L3
1 column:
R1
L1
L2
L3
R2
Using Bootstrap, I'm able to get the R1 to stay at the top using col-pull/col-push, but the right hand column values under R1 flow after all values from the left hand column have rendered thus resulting in:
L1 R1
L2
L3
R2
Here's the markup that I've attempted so far. I've also posted a jsfiddle for those who need a live sample to play with at http://jsfiddle.net/jimwooley/g8r35/.
<div class="row row-fluid">
<div class="col-sm-7 col-sm-push-5 col-xs-12">R1</div>
<div class="col-sm-5 col-sm-pull-7 col-xs-12">L1<br />
L2<br />
L3</div>
<div class="col-sm-5 col-sm-push-5 col-xs-12">R2<br />
R3</div>
</div>
Note: the hights of the sections varies, so I can't just flow line two right below or beside line two left because they may fall half-way between the two. Also, I can't use columns here because the result needs to work with IE8.
Make them column 6 instead of 12? Since bootstrap looks for 12 on a page? Therefore a call of 6 or 3 should show single column. (tablet or mobile in this example). where full screen would show 2 columns.
I could be misunderstanding the question.
While I admit the duplication is not a good thing, I've had success in using the hidden-* and visible-* classes from Bootstrap.
<div class="row row-fluid">
<div class="col-sm-7 col-sm-push-5 col-xs-12">
<div>
Upper Right<br />
line 1<br />
</div>
<div class="hidden-xs" >Below Right<br />
line 1<br />
</div>
</div>
<div class="col-sm-5 col-sm-pull-7 col-xs-12">Upper Left<br />
line 1<br />
line 1<br />
line 1<br />
line 1<br />
line 1<br />
</div>
<div class="visible-xs">
Below Right<br />
line 1<br />
</div>
</div>
See here: http://jsfiddle.net/darronj/t8nYn/
Why not have R1 just push-right and allow the columns to wrap around it? That way it will always be on top. It would need to be first.
Related
I'm trying to make my content page that normally is split into two col-xs-6 columns to vertically stack on top of each other for smaller screens/mobile. When I try minimize the screen, the columns just mash together instead of stacking. I feel like I'm missing something important because I thought bootstrap columns were automatically responsive like the ones on this site:
https://getbootstrap.com/examples/grid/
my html code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 aboutbg">About Us
</div>
</div>
<div class="row">
<div class="col-xs-6 aboutrow text">
<h2>Home Roots</h2>
<p> Founded right here in Ontario</p>
</div>
<div class="col-xs-6 aboutrow pic">
<h3>insert pic</h3>
</div>
<div class="col-xs-6 aboutrow pic">
<h2>insert pic</h2>
</div>
<div class="col-xs-6 aboutrow text">
<h2>Our Values</h2>
<p>Good food makes good people</p>
</div>
<div class="col-xs-6 aboutrow text">
<h2>Our Promise to You</h2>
<p>The freshest and the bestest of foods</p>
</div>
<div class="col-xs-6 aboutrow pic">
<h3> Insert pic</h3>
</div>
</div>
I've tried littering the page with div rows, but that doesn't change the layout too. I've got the standard bootstrap cdn and jquery in the base template too. What is it I'm missing to make the columns stack vertically?
make Separate columns stack nicely
I have used javascript libraries like : https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows, to make all columns (on the same row) have equal height. This way bootstrap can handle it nicely and stack them nicely.
make columns stack only on mobile or small
Or what you mean is: you want them to stack in mobile, but in desktop to be two separate columns?
what xs-col-6 means is: for xs devices (or bigger) split up in 2 columns (12 /6 = 2)
use: xs-col-12 sm-col-6
explanation
this means for xs or bigger devices use 1 column, for sm devices or bigger use 2 columns.
remember bootstrap defined these steps (xs, sm, md, lg). they are bound too a certain pixel width. so, no guaranty it will actually show mobile layout when you use mobile phone (phones are mostly xs, sm).
alternatives
you can hide blocks all together for certain screen-widths by using classes like .hidden-lg
reference: http://getbootstrap.com/css/#responsive-utilities
easy tooling
here use: http://shoelace.io/ to make your grid respond the way you want. It generates html code for you. simply copy paste the classes in your divs and you have the responsiveness you want.
i try to add 6 elements to one row with the following definition:
<div class="row container">
<div class="col-sm-4 col-md-4">
<div class="ih-item circle effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img class="img-responsive" src="http://news.uwlax.edu/wp-content/uploads/2013/09/FMF.jpg" alt="img"></div>
</a></div>
</div>...
</div>
each line should contain 3 elements and the rest have to start new line.
actualy the new line stand and cover part of the first line.
see the attached screenshot.
any advice?
thanks.
First of all, do not use 'row' and 'container' on the same <div>.
'row' should always be a child of 'container'.
Second, define 3 <div>'s with 'col-md-4 col-sm-4' inside a <div class="row">.
Repeat.
maybe i was not clear enough.
i inserted 6 columns into one row.
each one of them has the class "col-md-4" so i accepted 2 lines with 3 columns.
my problem was that the the bottom line rose slightly on top line.
i succeeded to solve it by giving the attribute margin-bottom:30px;
thank you for answering me.
I want both the map and pie chart in a row, but it is coming in 2 different row. Any Help would be appreciated.
Here is link:
http://jsfiddle.net/2emnt8m3/14/
Image for the design:
<div class="container">
Bootsrap grid system scales up to 12 columns. The number after the class prefix represents the width in columns. Each column type works differently on multiple devices (.col-xs-* remains horizontal at all times, while the others are collapsed to start and horizontal above breakpoints).
<div class="container">
<div class="row">
<div class="col-xs-6">
<!-- map -->
</div>
<div class="col-xs-6">
<!-- chart -->
</div>
</div>
</div>
For details, see the Bootrap docs: http://getbootstrap.com/css/#grid.
You need to change line 7067 from
var vis = d3.select('body')
to
var vis = d3.select('#piechart')
See live example here: http://jsfiddle.net/cdog/h0rnzk4s/.
I'm now reading documentation on Twitter Bootstrap 3, and tried to follow column ordering as shown in this page but hit the wall. I don't understand why such a code works nor how to correctly specify the setting. What I want to show is one grid, which is consisted of length 5, and the other length 5, and finally one length 2 grid.
So mine is something like this:
[5] [5] [2]
And what I want to achieve is, when it's viewed on Desktop the layout above is displayed, but when it's viewed on mobile, I want to show the second length 5 object first, then the first length 5 object, and finally the length 2 object, vertically. Like this:
[5] (second)
[5] (first)
[2]
While I tried to follow the step explained in the above documentation, I got the first length 5 object over the second one despite being on mobile platforms, which as I said should display second length 5 object on the top. In other words, I got this:
[5] (first)
[5] (second)
[2]
So how can I correctly put the second one over the first? Or since I use the same length object, could the column ordering not work?
Here's my code for your information:
<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>
Also, the documentation doesn't clarify what pull or push means. So am I missing something?
Thanks.
This answer is in three parts, see below for the official release (v3 and v4)
I couldn't even find the col-lg-push-x or pull classes in the original files for RC1 i downloaded, so check your bootstrap.css file. hopefully this is something they will sort out in RC2.
anyways, the col-push-* and pull classes did exist and this will suit your needs. Here is a demo
<div class="row">
<div class="col-sm-5 col-push-5">
Content B
</div>
<div class="col-sm-5 col-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0
Also see This blog post on the subject
col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
vp = xs, sm, md, or lg
x = 1 thru 12
I think what messes most people up, is that you need to change the order of the columns in your HTML markup (in the example below, B comes before A), and that it only does the pushing or pulling on view-ports that are greater than or equal to what was specified. i.e. col-sm-push-5 will only push 5 columns on sm view-ports or greater. This is because Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.
(Desktop) Larger view-ports get pushed and pulled.
(Mobile) Smaller view-ports render in normal order.
DEMO
<div class="row">
<div class="col-sm-5 col-sm-push-5">
Content B
</div>
<div class="col-sm-5 col-sm-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
View-port >= sm
|A|B|C|
View-port < sm
|B|
|A|
|C|
EDIT: BELOW IS THE ANSWER FOR v4.0
With v4 comes flexbox and other changes to the grid system and the push\pull classes have been removed in favor of using flexbox ordering.
Use .order-* classes to control visual order (where * = 1 thru 12)
This can also be grid tier specific .order-md-*
Also .order-first (-1) and .order-last (13) avalable
<div class="row">
<div class="col order-2">1st yet 2nd</div>
<div class="col order-1">2nd yet 1st</div>
</div>
Pull "pulls" the div towards the left of the browser and and Push "pushes" the div away from left of browser.
Like:
So basically in a 3 column layout of any web page the "Main Body" appears at the "Center" and in "Mobile" view the "Main Body" appears at the "Top" of the page. This is mostly desired by everyone with 3 column layout.
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
<h2>This is Content</h2>
<p>orem Ipsum ...</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>This is Left Sidebar</h2>
<p>orem Ipsum...</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>This is Right Sidebar</h2>
<p>orem Ipsum.... </p>
</div>
</div>
</div>
You can view it here: http://jsfiddle.net/DrGeneral/BxaNN/1/
Hope it helps
Misconception
Common misconception with column ordering is that, I should (or could) do the pushing and pulling on mobile devices, and that the desktop views should render in the natural order of the markup. This is wrong.
Reality
Bootstrap is a mobile first framework. This means that the order of the columns in your HTML markup should represent the order in which you want them displayed on mobile devices. This mean that the pushing and pulling is done on the larger desktop views. not on mobile devices view..
Brandon Schmalz - Full Stack Web Developer
Have a look at full description here
I just felt like I'll add my $0.2 to those 2 good answers. I had a case when I had to move the last column all the way to the top in a 3-column situation.
[A][B][C]
to
[C]
[A]
[B]
Boostrap's class .col-xx-push-Xdoes nothing else but pushes a column to the right with left: XX%;
so all you have to do to push a column right is to add the number of pseudo columns going left.
In this case:
two columns (col-md-5 and col-md-3) are going left, each with the value of the one that is going right;
one(col-md-4) is going right by the sum of the first two going left (5+3=8);
<div class="row">
<div class="col-md-4 col-md-push-8 ">
C
</div>
<div class="col-md-5 col-md-pull-4">
A
</div>
<div class="col-md-3 col-md-pull-4">
B
</div>
</div>
If you need to organize data in columns of 1 / 2 / 4 depending of the viewport size then push and pull may be no option at all. No matter how you order your items in the first place, one of the sizes may give you a wrong order.
A solution in this case is to use nested rows and cols without any push or pull classes.
Example
In XS you want...
A
B
C
D
E
F
G
H
In SM you want...
A E
B F
C G
D H
In MD and above you want...
A C E G
B D F H
Solution
Use nested two-column child elements in a surrounding two-column parent element:
Here is a working snippet:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-md-6"><p>A</p><p>B</p></div>
<div class="col-md-6"><p>C</p><p>D</p></div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-6"><p>E</p><p>F</p></div>
<div class="col-md-6"><p>G</p><p>H</p></div>
</div>
</div>
</div>
Another beauty of this solution is, that the items appear in the code in their natural order (A, B, C, ... H) and don't have to be shuffled, which is nice for CMS generation.
I know that there are many questions about this issue, but nothing worked for me properly.
I need to align my PanelGrid to center(horizontal).
this is my panelgrid
<p:panelGrid styleClass="panelGridCenter">
and my CSS:
.panelGridCenter td,.panelGridCenter tr {
text-align: center;
}
It just aligns the content to center, but not the panelGrid
The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.
.panelGridCenter {
margin: 0 auto;
}
See also:
Center a div in CSS
The above answer is technically correct but also incomplete.
If you want to center something like a div, the above technique of playing with the left and right margin as auto will work, provided that your DIV has limited width.
E.g. For you to start being any effect you would have to put something like a width=60%.
And then, once you realize you need to play with fixed widths... you immediately are prompted to the next question:
So what exactly should I type in as my fixed width?
That is why I believe the better answer for this question is:
CSS techniques like the one above, are OK for the small details on a web page.
But your coarse grained approach for centering anything on a web page should be to make use of a grid system.
Most grid systems use 12 cells.
If for example your grid system would be by default make 12 cells = 100% width.
You could center something by, for example placing your content to be centered in cells [5-8] leaving out as centurion space cells [1-4] and cells [9-12].
Here is an example based in prime faces grid system:
<h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
<form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
<!-- (a) Start a grid system-->
<div class="ui-g ui-fluid">
<!-- (b) Eat the first four cells of the grid -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (c) In the center location of the grid put in the Login form -->
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
</div>
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
<input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
</div>
</div>
<!-- (d) Eat the rest of the first row of the grid without setting any contents -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (e) Start the second row and eat the first four cells -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (f) Position a form submit button on the fifth cell -->
<div class="ui-g-12 ui-md-1">
<button id="loginSubmit" pButton type="submit" label="Submit"></button>
</div>
</div>
</form>
The comments on the above form should make it pretty clear what I meant above.
The grid system will normally offer CSS classes to allow your UI to be working across multiple form factors of devices, although ... on this regard I am of the opinion that you can not make a good mobile UI using a desktop UI nor a good desktop UI using a mobile UI.
On my opinion you can get a good Tablet/Desktop UI cooked up, but you should write pages from scratch with the minimal an necessary contents for mobile. But that is a different discussion ... just to say, that the flex grid css classes will only take you so far.
A lot of potential in theory, much better than hard coding some arbitrary fixed length on your div elements ... but not a silver bullet for all of your problems either.
In case if you want right align
.rightAlign{
margin-left: auto;
}