CODEWITHSUNDEEP
htmlcssjquery-mobile
eng_mazzy
eng_mazzy

Reputation: 1049

setting form input element inline using jquery mobile

Well I created a jquery mobile form but the every element is in a new line. I would put PR field after Birth Place in a unique line and the radio button Male/Female in the same line to Birth Date. How can I do? I even tried to use grid columns layout but didn't work.Here is it my own code:

<div data-role = "content">
        <form action = "?" method="post" name="form" id = "form">
            <fieldset>

            <div data-role = "fieldcontain" class = "ui-hide-label">
                <label for="name">Name</label>
                <input type="text" name="name" id="name" value="" placeholder="Name" />
            </div>

            <div data-role ="fieldcontain" class= "ui-hide-label">
                <label for="surname">Surname</label>
                <input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
            </div>

            <div data-role ="fieldcontain" class= "ui-hide-label">
                <label for="address">Address</label>
                <input type="text" name="address" id="address" value="" placeholder="Address"/>
            </div>

                <div data-role="fieldcontain" class = "ui-hide-label">
                    <label for="birth-place">Birth Place</label>
                    <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
                </div>
                <div data-role = "fieldcontain" class="ui-hide-label">
                    <label for="province">Province</label>
                    <input type="text" name="province" id="province" value="" placeholder="PR" />
                </div>

                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for"date">Birth Date</label>
                    <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
                </div>

                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
                        <label for="radio-choice-1">Male</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female"  />
                        <label for="radio-choice-2">Female</label>
                    </fieldset>
                </div>

                <div data-role="fieldcontain" data-type="horizontal">
                    <label for="select-choice-0"></label>
                    <select name="select" id="select">
                        <option value="politrauma">Politrauma</option>
                        <option value="cardiologico">Cardiologico</option>
                        <option value="neurologico">Neurologico</option>
                    </select>
                </div>

                </div>
            </fieldset>
        </form>
    </div>

Upvotes: 4

Views: 14975

Answers (1)

Subhash k
Subhash k

Reputation: 391

Grid Layout of two columns works fine. Below is the code after modification.

<form action = "?" method="post" name="form" id = "form">
        <fieldset>

        <div data-role = "fieldcontain" class = "ui-hide-label">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" value="" placeholder="Name" />
        </div>

        <div data-role ="fieldcontain" class= "ui-hide-label">
            <label for="surname">Surname</label>
            <input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
        </div>

        <div data-role ="fieldcontain" class= "ui-hide-label">
            <label for="address">Address</label>
            <input type="text" name="address" id="address" value="" placeholder="Address"/>
        </div>

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div data-role="fieldcontain" class = "ui-hide-label">
                    <label for="birth-place">Birth Place</label>
                    <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
                </div>
            </div>
            <div class="ui-block-b" style="width:48.5%">
                <div data-role = "fieldcontain" class="ui-hide-label">
                    <label for="province">Province</label>
                    <input type="text" name="province" id="province" value="" placeholder="PR" />
                </div>
            </div>                
        </div>

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for"date">Birth Date</label>
                    <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
                </div>
            </div>
            <div class="ui-block-b">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
                        <label for="radio-choice-1">Male</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female"  />
                        <label for="radio-choice-2">Female</label>
                    </fieldset>
                </div>
            </div>                
        </div>              

            <div data-role="fieldcontain" data-type="horizontal">
                <label for="select-choice-0"></label>
                <select name="select" id="select">
                    <option value="politrauma">Politrauma</option>
                    <option value="cardiologico">Cardiologico</option>
                    <option value="neurologico">Neurologico</option>
                </select>
            </div>

            </div>
        </fieldset>
    </form>

Upvotes: 4

Related Questions