0

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?

user1532510
  • 69
  • 1
  • 9

1 Answers1

0

Use Grid CSS and also see How to achieve Responsive Design by using PrimeFaces

ArgaPK
  • 455
  • 1
  • 9
  • 22
  • I am already doing this, and using Ultima theme with grid.css which is why in mobile the buttons stack vertically, so it is responsive as I mentioned in question, But in desktop, I don't want 100% of screen taken up with 4 stretched buttons. – user1532510 Jan 12 '17 at 19:08