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
Related
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'm trying to try bootstrap's grid system on jsfiddle but I'm unable.
See it on jsfiddle
I've taken bootstrap doc example:
<div class="row">
<div class="col-md-1">.col-md-1</div>
...
</div>
items get stacked instead of horizontally aligned.
items get stacked instead of horizontally aligned.
because that is the intended result when the viewport is resized - in your case, using col-md classes, the columns would start stacking in a viewport that is less than 992px. Look at your same fiddle in fullscreen, or just resize the window horizontally.
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>
I would like to make two specific columns in the layout below, stretch the entire page height, unless their on mobile (tablet they can still stretch as most tablets are 720.
<div class="rows">
<div class="col-md-1">
</div>
<div class="col-md-10">
</div>
<div class="col-md-1">
</div>
</div>
col-md-1, right now only stretches as far as the content you put in it stretches, how ever I would like, on anything higher then 720 for it to stretch the pages full height, that is they should stretch down to the footer and then on anything smaller then 720 they should just be regular height boxes, that is "stretch to fit their contents"
How could I achieve this with out breaking default bootstrap behaviour to much.
1) In your HTML add a new class to the div(s) that you want to increase to page height
2) In your CSS, use #media-screen with a minimum width of 720px so that you're only specifying this for non-mobile devices, and within the new class specify min-height as 100%. See below..
#media screen and (min-width: 720px){
.new-class {
min-height:100%; }}
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.