CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mattew Trincanati
Mattew Trincanati

Reputation: 191

Jquery mobile side by side inputs

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

Upvotes: 0

Views: 521

Answers (4)

Mukul Kant
Mukul Kant

Reputation: 7122

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.

Upvotes: 1

Angry 84
Angry 84

Reputation: 2995

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

Upvotes: 0

Mattew Trincanati
Mattew Trincanati

Reputation: 191

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>

Upvotes: 0

yibuyisheng
yibuyisheng

Reputation: 149

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>

Upvotes: 0

Related Questions