jQuery Mobile: managing width of buttons and text input buttons

Data attribute data-inline="true" works on buttons

jQuery Mobile buttons will typically take up as much horizontal space as they can. The css width property has no influence on the this button, because JQM's rendering engine constructs it's own set of divs and spans to create it's own styled button and ignores extra css formatting.

However the data attribute data-inline="true" can be used to make more compact buttons, that is, render a button that is just a bit wider (by 20px on each side) than the text in the button.

For example:

This big button takes up as much space as it can Compact button takes up only as much space as it needs Submit

Code:

<button type="button" data-inline="false" >Big Button that takes up as much space as it can</button>
<button type="button" data-inline="true" >Compact Button takes up only as much space as it needs</button>
<button type="submit" data-inline="true" >Submit</button>
<input  type="button" data-inline="true" value="Button">
<input  type="button" data-inline="true" value="Submit and Update">
	

...but not on text input boxes

The data-inline="true" works on html button tag, and input tag with type=button, but not on input tag with type=text. The JQM text input box spans the full available width. In a way this makes sense because it is not obvious what would determine the length. However it would be useful to have a mechanism to control width of input text box.

Example of JQM text input box.

Code

<input type="text" data-inline="true" value="Enter some text here!">

One solution: put a container around it

One solution is to put a container around the textbox and control the width by adjusting the width of the container with css as in the following example.

Code:

<script>
    #textInputContainer-1 {
       width: 30% !important;   
    }
</script>

<div id="textInputContainer-1">
    <input type="text" data-inline="true" value="Enter some text here!" />             
</div>
	

jQuery Mobile has a more elegrant wrapper technique called jQuery Mobile Layout Grids (ui-grid)

The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid.

There are four preset layouts that can be used in any situation that requires columns:

• two-column (using the ui-grid-a class)
• three-column (using the ui-grid-b class)
• four-column (using the ui-grid-c class)
• five-column (using the ui-grid-d class)

Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.

Within the grid container, child elements are assigned ui-block-a/b/c/d/e in a sequential manner which makes each "block" element float side-by-side, forming the grid. The ui-block-a class essentially clears the floats which will start a new line.

from JQM manual on Layout Grids

Example of input box using ui-grid

Code:

<div class="ui-grid-d">    
    <input type="text" data-inline="true" value="Enter some text here!">
</div>   

While we are here we will add some javascript to clear input box when we enter it, and put the "Enter some text here!" reminder back when we leave the text without any entry

    <script>
    $(document).on('pageinit', function(){    
        // on entry (focus) of text field, clear the field so user does not have to 
        $('#textInputContainer-2 input').focus(function(){                                            
            if($('#textInputContainer-2 input').val() == "Enter some text here!"){                                
                    $('#textInputContainer-2 input').val("");
                    
            }        
        });                        
        // on exit, if blank, put back message
        $('#textInputContainer-2 input').blur(function(){                                            
            if($('#textInputContainer-2 input').val() == ""){            
                    $('#textInputContainer-2 input').val("Enter some text here!");
            }        
        });                                
    });
    </script>