Are there any built in css classes in jQuery Mobile for horizontal positioning? In Bootstrap, the screen is divided by 12 columns, and elements can be aligned based on them. Example: "col-md-2". http://getbootstrap.com/examples/grid/
I want it to be fairly responsive in design. At the moment I'm thinking of using divs and set the "css width" to a percentage..
Take a look at jquerymobile responsive grids: link
code:
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">Column A</div>
<div class="ui-block-b">Column B</div>
<div class="ui-block-c">Column C</div>
</div>
Related
Basically I need 3 divs to align on small width (<576px) like in the top of image below and on rest of the widths (>576px) like in the bottom on the image below.
How it can be achieved with bootstrap flexbox classes?
I'm assuming base set is:
<div class="d-flex">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
I don't see .column and .row classes being used because A and B don't share same div on small and large screens... experimented with differnt classes with no success.
For the alignment top of the image. Use align-content utilities on flexbox containers to align flex items together on the cross axis. You can choose
<div class="d-flex align-content-start flex-wrap">...</div>
for the content top of the image and for bottom you can choose
<div class="d-flex align-content-end flex-wrap">...</div>
Here, I am assuming that image would be in different <div> and For the responsive behaviour you can use .order classes
I am new to CSS and am having an issue with layouts.
I have 4 buttons to be laid out horizontally unless it is mobile, in which case they should be stacked vertical.
I currently have:
<div class="ui-g-12 ui-md-12">
<div class="card">
<p:panel id="filter" header="Filter">
<p:panelGrid columns="4" styleClass="ui-panelgrid-blank"
layout="grid">
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
</p:panelGrid>
</div>
</div>
In desktop mode, I don't want the buttons stretched to fit 100% of screen as they are too wide (25% each), so the generated code I need is:
<div class="ui-panelgrid-cell null"><button id...></button></div>
but what I get is:
<div class="ui-panelgrid-cell ui-grid-col-3"><button...></button></div>
which is why the 4 buttons each take up 25% of screen width.
Can anyone please suggest how I can keep buttons responsive, but the 4 buttons don't take up 100%(25% each) of screen width when in desktop?
Use Grid CSS and also see How to achieve Responsive Design by using PrimeFaces
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
i use bootstrap for fluid grid system.
i have a div with class .span6 and i set heigth:200px for this.
now i want when window is re-sizing the div's height decrease like as width.
http://jsfiddle.net/prince4prodigy/X8zu8/
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
That depends what will be in the divs and how the site is designed...
If you just want to decrease the size than you have to make it via JS, or start positioning your elements absolute.
If the site is designed to be 100% height of the window, you can make the elements absolute and it will be easy.
But if the site isn't 100% of the window height, than the only solution is via javscript.
I don't understand why to use JS. On window re-sizing, i would probably prefer media querys for the div's.
I am using bootstrap's grid, and I would like to have a div that "breaks" the grid and is streched to the borders of the screen ('width:100%').
my code looks something like this:
<div class="container">
<div class="row">
<div class="span12">
div that is the width of the grid
</div>
<div class="unknown">
div that breaks the grid and has full width
</div>
</div>
</div>
how can I achieve this? is it common practice to open many different containers, or can I do this with divs nested with the container?
Use several containers rather than overriding the layout with custom styling.
Bootstrap themselves have examples with multiple containers being used, such as:
the carousel