By default form elements (input) in jQuery Mobile span over the full width of the screen.
How can I make them fit to the size of their content ?
You can use data-inline="true" on buttons and selects to make them span to the width of their content.
Related
Is it possible to fit a jQuery mobile dialog to the height and width of a page, especially during orientation change on a tablet? I've tried wrapping a div inside the dialog and setting its height and width to percentages, but that has not worked for some reason. Setting that div to a static width and height works fine, but then looks bad on orientation change.
If i change the Spinner width like below only the up/down arrow place is changed-the text area remains as default, how do i change the size of the spinner -including the text area.
<p:spinner id="spinnerBasic" style="width:50px;"/>
The Primefaces spinner is a compound component consisting of a text field and the control elements. All this will be rendered inside a <span>.
If you only want to change the size of the text input, the p:spinner has a size attribute:
<p:spinner id="spinnerBasic" size="20"..../>
From the primefaces documentation:
size: Number of characters used to determine the width of the
input element.
The corresponding css class is ui-spinner-input. Changing the width attribute of this class to get the desired changes.
I want to increase the font-size of the text in the JQM data-role=header tag without allowing JQM to increase the height of the header bar from its normal (20px?)
JQM seems to be calculating the height for the bar based on the font-size of the child nodes.
This worked for me: http://jsfiddle.net/shanabus/Z2saQ/
Click the button to see that page 2 is different and works per your question.
I just set the .ui-header class of #page2 to a static 41px tall.
Then set the h1 to something larger like 2em.
I have a jQuery UI dialog to which I applied a padding, and inside the dialog I have a long table. I then configure the dialog to be of limited height in order to have a scrollbar.
It seems that whenever a nowrap is applied to the table cells, the padding to the right of the table is covered by the scrollbar. If I remove the nowrap, it works fine.
Here is an editable example:
http://jsbin.com/okolap/4/edit
It seems that it only happens when you set the dialog's width to auto.
One workaround is to set the table's width to 100% and reset the dialog's width to a fixed length. The length needs to add a padding equal or larger than the width of the scroll bar. For example:
var newWidth = $('.Dialog').width() + 50;
$('.Dialog').width(newWidth);
See this in action: http://jsbin.com/okolap/10/.
I am having a listbox with large contents. I have used a div outside the listbox (no fixed height and width set)with a fixed width and height sothat the div is having both horizontal and vertical scroll. The list box within the div does not have any scroll. The div will not scroll down when i use key down for the listbox inside it. I want to move the scroll of the div according to the listbox key down. Can any one give a solution for this