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:
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:
So how I can set the width of Panel properly?
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.
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:
How can I get rid of the grey background and push my content to the left?
Hi,
Here is a solution: http://stackoverflow.com/questions/17...
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
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.