CODEWITHSUNDEEP
jqueryhtmljquery-mobile
lonelymo
lonelymo

Reputation: 4182

JQuery Mobile: How do I align UI elements with mark up only?

With JQueryMobile, I am trying to build a popup that should look like this

enter image description here

I have tried all possible options but haven't been able to arrive at this UI.

    <div data-role="popup" id="referpage" data-overlay-theme="b" data-theme="b" data-dismissible="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <div data-role="main" class="ui-content" data-theme="b">
            <h2 class="ui-title">Have a code?</h2>
            <p>validate the code with us right here</p>
            <div class="grid_14">
                <div class="grid_10">
                    <input type="text" data-clear-btn="true" placeholder="6 char. code" name="referralCode" id="referralCode">
                </div>
                <div class="grid_4">
                    <a class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-check ui-btn-icon-notext">check</a>
                </div>
            </div>

            <div class="grid_14">
                <div class="grid_4">
                    <input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true">
                </div>
                <div class="grid_10">
                    <p>do not show me this again</p>
                </div>
            </div>

            <a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-arrow-r">Next</a>
            <!-- <a id="btnReferralPageNext" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Next</a> -->
        </div>
    </div>

I don't understand why the check icon next to the code input is not aligned or why the checkbox and "do not show me this again" text are not aligned.

Any thoughts here would help.

Upvotes: 0

Views: 137

Answers (1)

Tasos
Tasos

Reputation: 5361

With what you have, the reason the elements are not aligned is because the display: block css property is set for all elements in your popup and that causes them to take up the whole space hence block like a paragraph p element.

Change it to inline-block and that fixes the problem.

More info here regarding the css display property

http://www.w3schools.com/cssref/pr_class_display.asp

Demo. I removed some markup divs as the are not needed.

http://jsfiddle.net/8x4vkv1b/

CSS

.grid_11, .grid_12, .grid_4, .grid_10 {
    display: inline-block !important;
}
.grid_11 {
    width:150px;
}
.next {
    left:66%;
    margin-bottom:-5px
}

Result

enter image description here

Upvotes: 1

Related Questions