Page 1 of 1

How to adjust panel component width

Posted: Thu Feb 20, 2014 2:38 am
by ang .

Hi, I am trying to adjust the width of the new panel component where display is set to "reveal" or "push".

This is how it looks like when user click the toogle button currently:
Image

I felt it took too much of screen space especially in small device, so I reduce the width by changing the width CSS property of "ui-panel;" class, but it became:
Image

So how I can set the width of Panel properly?


How to adjust panel component width

Posted: Thu Feb 20, 2014 3:19 am
by Alena Prykhodko

Hi,

You can Run this JS:
preAppery("panel_X").css("width","60px");/pre

Where panel_X - your panel component name.

Or specify panel Class Name in Properties and use CSS to style the component.


How to adjust panel component width

Posted: Mon Feb 24, 2014 8:06 am
by ang .

Hi, I have set the css as suggested, although the panel's own width is reduced, but there is a large area of grey blank space as shown in following screenshot:
Image

How can I get rid of the grey background and push my content to the left?


How to adjust panel component width

Posted: Mon Feb 24, 2014 5:44 pm
by Kateryna Grynko

How to adjust panel component width

Posted: Tue Feb 25, 2014 2:24 am
by ang .

Hi,
Sorry I still dont get it, I added the "!important" attribute, but it is still the same
codeAppery("panel_X").css("width","60px !important");/code

do you mean add the "!important" attribute to all related css properties? how can I overwrite the css file?
files/resources/lib/jquerymobile/1.3.2/jquery.mobile.structure-1.3.2.css


How to adjust panel component width

Posted: Tue Feb 25, 2014 9:19 am
by Maryna Brodina

Hello!
You can't add !important this way. Create new CSS asset and add descripion with the same or mor specific selectors and add !important for properties you need.