Search jQuery

jQuery Forum

how to create a basic unordered list displaying bullets

in jQuery Mobile • 3 months ago

Howdy,

I've seen posts for this elsewhere, but the suggestions are not working for me.
I need a basic <ul> that displays the <li> with the standard bullets. Here's what I've tried...

I placed the mobile.ignoreContentEnabled = true in the head...

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Webmail</title>
    <link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
    <link rel="stylesheet" href="../_assets/css/pages.css" />

    <script src="../../js/jquery.js"></script>
    <script src="../../docs/_assets/js/jqm-docs.js"></script>
    <script src="../../js/jquery.mobile-1.2.0.js"></script>

    <script>
        $(document).on('mobileinit', function () {
            $.mobile.ignoreContentEnabled = true;
        });
    </script>

</head>

I put my <ul> in a <div> with the data-enhance="false" attribute...

            <div data-enhance="false">
                <ul>
                    <li>Send and receive email.</li>
                    <li>View foundation staff availability and schedule meetings.</li>
                    <li>Open the foundation’s global address list.</li>
                </ul>
            </div>

But no bullets for my <li>. Not sure what else to do.

Thank you for any help you can give!

kave

Replies(9)

watusiware

Re: how to create a basic unordered list displaying bullets

3 months ago

Hard to tell, since you haven't show us your entire page.

You shouldn't need data-enhance="false", unless you are using some other JQM widgets inside your list.

I routinely use bare <li>s without data-role="listview" and my experience is the opposite. I don't want the bullets, and so I have to disable them with CSS.

You can use Safari Web Inspector, Firebug, etc. to inspect and see what is influencing the CSS, and so you can discover just what you need to override.

I'm guessing it's something in the jqm-docs.css, which is not a standard part of JQM.

haga0054

Re: how to create a basic unordered list displaying bullets

3 months ago

Actually seems like a bug to me.

http://jsfiddle.net/8zCgk/

Simplest example possible. I would report it on the github: https://github.com/jquery/jquery-mobile

I also tried on 1.3.0RC1 and it isn't showing up.

rezu12

Re: how to create a basic unordered list displaying bullets

3 months ago

Thanks both for the responses...

I'm just using the bare bones jqm framework with no add ons.

It would seem that this css is the culprit:

jqm-docs.css +/- line 543
ul li { list-style:none; padding:.7em 0; margin:0; border-bottom:1px solid #e3e3e3; }

Of course, when I take out list-style:none, the bullets appear. Taking this out doesn't seem to affect any of my listview menus.

Why would jQM add this default code?

watusiware

Re: how to create a basic unordered list displaying bullets

3 months ago

I'm just using the bare bones jqm framework with no add ons.

That's not true.

<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../docs/_assets/js/jqm-docs.js"></script>

jqm-docs is not a part of jQuery Mobile. It's something that is used on the jQuery Mobile documentation site. It is a customized CSS for a particular use. While some people have "borrowed" this CSS to use themselves, it's not documented or meant to be a part of the JQM distribution.

Are you trying to develop a site with a navigation sidebar that looks like the JQM documentation site? If not, lose these links.

rezu12

Re: how to create a basic unordered list displaying bullets

3 months ago

I stand corrected, thanks!

rezu12

Re: how to create a basic unordered list displaying bullets

3 months ago

Actually Watusiware,

<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

this jqm-docs.css file does come as part of the jQM 1.2.0 package, I just downloaded & unzipped the package, and there it is...

So my previous question still stands...why does this line exist to cancel out bullets...

jqm-docs.css +/- line 543
ul li { list-style:none; padding:.7em 0; margin:0; border-bottom:1px solid #e3e3e3; }

And this brings up a new question...why are they allowing us to download what you feel to be a customized/hacked package as opposed to a pure jQM package?

As far as what is or isn't a pure jQM package, I can only go by what I've downloaded from jQM
http://jquerymobile.com/download/ > Zip File:
If there are files that we shouldn't be including b/c they get in the way of jQM functionality, it would be nice to have that documented somewhere. :)

Cheers,

kave

Attachments

jqm-docs.css.PNG
Size : 19.98 KB Download : 227

watusiware

Re: how to create a basic unordered list displaying bullets

3 months ago

Try READING the documentation. This page will show you how to set-up the standard JQM JS and CSS assets:

http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

If you download the .zip, the only files that are needed are those in the top-level directory and images.

The demos directory is just that: demos. It also includes the documentation (in the demos/docs directory), so that you can read the documentation off-line. The documentation uses the jqm-docs files. They are part of the documentation website. It was custom-designed for the documentation website.

haga0054