Jquery mobile navbar doesn't display properly

Question

Here's a JsFiddle :

HTML :

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div data-role="page" data-theme="b" id="home">
    <div class="wrapper">
        <div data-role="tabs">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#fragment-1" class="ui-btn-active">test 1</a></li>
                        <li><a href="#fragment-2"> test 2</a></li>
                    </ul>
                </div>
                <div id="fragment-1">
                    test1
                </div>

                <div id="fragment-2">
                    test2
                 </div>
        </div>     
    </div>
</div>

CSS :

.wrapper {
    margin: 0 auto;
    max-width: 600px;
    font-size: 12pt;
}

It's working fine on JsFiddle. But in my page, it it like this :

enter image description here

instead of :

enter image description here

Do you have an idea what could be the problem ?

It's ASP.NET MVC website. My Layout :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        @Styles.Render("~/Content/css")
    </head>
    <body>
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jquerymobile")
        @RenderSection("scripts", required: false)
    </body>
</html>

I have no problem with JQuery Mobile in my other pages...

Maurice Perry · Accepted Answer · 2014-07-01 13:33:05Z

1

Yes, you need to remove the margin and the list-style of the ul:

[data-role="navbar"] ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

answered Jul 1, 2014 at 13:33

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gab Over a year ago

Thank you!. Is this a normal behavior ? And I still have a space between the two tabs. Do you know how can I display it like on JsFiddle ?

Maurice Perry Over a year ago

Yes, by default, uls are indented and bulleted. As for the space, try to clear the margin and padding of [data-role="navbar"] ul li

Gab Over a year ago

Thank you. In fact the second problem was stupid. I set a max-width for ui-btn in my css...

Collectives™ on Stack Overflow

Jquery mobile navbar doesn't display properly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related