Jquery mobile side by side inputs

Question

I want to dispose side by side (horizontal) two inputs using jquery mobile

I've tryed this way but seems not to work:

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;">
                    <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;">
                    <label for="end">End:</label> <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
                    </div>

I used this method to align side by side 2 buttons and it works, but I cannot align those with inputs

When ever i come across these issues, i start shrinking elements to their absolute smallest to make sure they wrap. Thing is most elements have a padding/margin. So things like the space between the label and input should also be deleted as this affects layout. Even remove the labels for a test and then place them back.. If they dont wrap with all this, Then a float or other method should be used — Angry 84, Apr 15 '15 at 08:14

Mukul Kant · Answer 1 · 2015-04-15T08:59:18.617

You should use float:left -

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;float:left">
                    <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;float:left">
                    <label for="end">End:</label> <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
  <div style="clear:both;"></div>
                    </div>

I hope it will helps you.

Still remains in two separate lines, left floated but one top another — Mattew Trincanati, Apr 15 '15 at 07:50

score 0 · Answer 2 · answered Apr 15 '15 at 08:10

I think the div container may have a padding, So try this code:

<div class="containerButtons ui-grid-a"
    style="padding:0">
    <div data-role="fieldcontain"
        class="ui-block-a"
        style=" width: 50% !important;float:left">
        <label for="start">Start:</label>
        <input type="date"
            data-date-format="dd-mm-yy"
            name="start"
            class="dataAControl" id="start">
    </div>

    <div data-role="fieldcontain"
        class="ui-block-b"
        style=" width: 50% !important;float:left">
        <label for="end">End:</label>
        <input type="date"
            name="end"
            class="dataAControl"
            id="end" >
    </div>

    <!-- don't forget clearing float -->
    <div style="clear:both;"></div>
</div>

score 0 · Accepted Answer · answered Apr 15 '15 at 08:15

I've found the problem, the "inside" div datarole had to be content

<div class="containerButtons ui-grid-a">
                <div data-role="content" class="ui-block-a" style=" width: 50% !important;">
                    <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="content"  class="ui-block-b" style=" width: 50% !important;">
                    <label for="end">End:</label> <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
                    </div>

score 0 · Answer 4 · edited May 23 '17 at 11:50

Modified using float:left for both divs which is all i needed to override it.

Also sent the inputs to a new line as for me this can make it easier to read/edit.

<div class="containerButtons ui-grid-a">
    <div data-role="fieldcontain" class="ui-block-a" style="float:left; width: 50% !important;">
        <label for="start">Start:</label>
        <input type="date" data-date-format="dd-mm-yy" name="start" class="dataAControl" id="start" />
    </div>

    <div data-role="fieldcontain"  class="ui-block-b" style="float:left; width: 50% !important;">
        <label for="end">End:</label>
        <input type="date" name="end" class="dataAControl" id="end" />
    </div>
</div>

Oh and a fiddle.. http://jsfiddle.net/xfn244nb/1/

If that fails, which tested for me does not.. You can always use display:inline-block; as this has always been my preferred method. eg Advantages of using display:inline-block vs float:left in CSS

Being i dont use jQuery mobile.. There may be a default attribute/style to do this without resulting in a style change vs a class.. But will leave it here as still explains one of the common quick fixes — Angry 84, Apr 15 '15 at 08:22

Jquery mobile side by side inputs

4 Answers4