CODEWITHSUNDEEP
htmlcssgoogle-chromejquery-mobile
Psyfun
Psyfun

Reputation: 369

jQuery Mobile horizontal button group is displayed incorrectly

I am having a problem with buttons not showing up correctly in a horizontal control group. Here is how it is supposed to work:

Buttons Displayed Correctly

After logging in, the Logout button uses a form with a submit button and it is not getting displayed correclty. Here is what I am getting:

Buttons Displayed Incorrectly

I can't figure out why because the markup seems to be correct, but Chrome is not interpretting it correclty. Here is what Chrome is computing for the CSS:

enter image description here

Why does Chrome show that it should use inline-block but is still using block?

Here is the markup source:

<div style="float:right;margin-right: 25px;">
    <div data-role="controlgroup" data-type="horizontal" style="float:right;display:inline;">
        <a class="username" data-ajax="false" data-inline="true" data-role="button" href="/Account/Manage" id="manageLink" title="Manage">admin</a>
        <form action="/Account/Logout" data-ajax="false" id="logoutForm" method="post">
            <input name="__RequestVerificationToken" type="hidden" value="" />
            <a href="javascript:document.getElementById('logoutForm').submit()" id="logoutLink" data-role="button" data-inline="true">Logout</a>
        </form>    
    </div>
</div>

And here is the applied markup in Chrome's element inspector:

<div style="float:right;margin-right: 25px;">
    <div data-role="controlgroup" data-type="horizontal" style="float:right;display:inline;" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" aria-disabled="false" data-disabled="false" data-shadow="false" data-corners="true" data-exclude-invisible="true" data-mini="false" data-init-selector=":jqmData(role='controlgroup')">
        <div class="ui-controlgroup-controls">
            <a class="username ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-inline ui-first-child" data-ajax="false" data-inline="true" data-role="button" href="/Account/Manage" id="manageLink" title="Manage" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a">
                <span class="ui-btn-inner"><span class="ui-btn-text">admin</span></span></a>
            <form action="/Account/Logout" data-ajax="false" id="logoutForm" method="post">
                <input name="__RequestVerificationToken" type="hidden" value="">
                <a href="javascript:document.getElementById('logoutForm').submit()" id="logoutLink" data-role="button" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-last-child ui-btn-up-a">
                    <span class="ui-btn-inner"><span class="ui-btn-text">Logout</span></span></a>
            </form>    
        </div>
    </div>
</div>

The resultant markup seems to have all the proper jQuery Mobile classes to make it look right: btn-inline and ui-last-child. Not sure what is causing the problem. Ideas?

Upvotes: 0

Views: 639

Answers (1)

ezanker
ezanker

Reputation: 24738

It is because you have a FORM element within the controlgroup. The best solution would be to remove the FORM element and just handle the logout button click without it.

If you really want to keep the FORM, you can override some CSS to make it look right:

[data-role="controlgroup"] form {
    display: inline;
    float: left;
}
[data-role="controlgroup"] form .ui-last-child {
    border-top-right-radius: 0.5em !important;
    border-bottom-right-radius: 0.5em !important;    
}

Make FORMs within a controlgroup display inline with a left float, and make the right corners rounded on the button inside the form

DEMO

Upvotes: 1

Related Questions