Materialize: Unordered lists show up without any styling

[AdityaAnand1]

The following means that by default all unordered lists appear without styling:

ul {
  list-style-type: none; }

Perhaps this property should have a narrower focus?

[lebart]

+1

[keeferrourke]

+1 unordered lists with bullet markers are an important part of a lot of information displays; obviously this exists so navbars, etc. don't have bullets, but a narrower focus would be a really great improvement.

[acburst]

You can add the browser-default class or enable it in your own css.

http://materializecss.com/helpers.html#browser-default

[sfcgeorge]

Probably shouldn't be closed, this doesn't actually work. The browser-default class only resets the list style type on the ul but it was disabled at higher specificity on the ul li. It is nuts that a framework would disable styling of lists, it really should be a part of the typography page.

/* Materialize overly specific disable */
ul li {
  list-style-type: none;
}

/* not specific enough to put default back */
ul.browser-default {
  list-style-type: initial;
}

If you're set on keeping the nuts default, the browser-default class could be fixed thusly:

ul.browser-default li {
  list-style-type: initial;
}

[phu]

Thanks for that, @sfcgeorge. It'll definitely be helpful.

[silverdr]

So - if I may ask - what is the preferred way of getting properly nesting, bulleted lists?

.browser-default brings the zero level bullets back but no nesting

[phu]

@silverdr: It's my impression there isn't one; it seems not to be a concern here. I ended up with this in a custom CSS file; it's pretty arbitrary, but it gets the job done, and should at least show one way to improve the non-workaround provided.

ul.browser-default {
  padding-left: 30px;
  margin-top: 10px;
  margin-bottom: 15px;
}
ul.browser-default li {
  list-style-type: initial;
}

It enables bullets and nesting, but only when browser-default is applied to _all_ ul's, which may be obvious but I thought worth mentioning. Note that since this explicitly specifies the list-style-type, it doesn't give the default different-styles-at-nested-layers discs, which might be possible but wasn't a priority for me.

[acburst]

Fixed in 7906874

[silverdr]

@acburst yes - that seems like a better way to handle the issue.

[invious]

This isn't fixed in 0.97.8. I had to add this CSS to ovverride it:

ul:not(.browser-default) {
    padding-left: 30px;
    margin-top: 10px;
    margin-bottom: 15px;
}

ul:not(.browser-default) li {
    list-style-type: disc;
}

and nested lists still don't work! How do I get good old nested lists to work?

[rgreer4]

It's working fine for me in v0.97.8. Are you doing this?

<ul class="browser-default">
    <li>test</li>
    <li>test</li>
    <ul class="browser-default">
        <li>test</li>
    </ul>
</ul>

That is without any other css, just materialize -- should look like a normal list.

[rgreer4]

I changed the CSS version to 0.97.8 in the fiddle, and it seems work (well,
better...its still not ideal).

https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css

-Rick

On Wed, Feb 1, 2017 at 8:30 AM, retorquere [e-mail] wrote:

I've tried to get this to work here http://jsfiddle.net/bkbuee24/ but
I'm still getting an unstyled list.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/2582#issuecomment-276670940,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ARs8VtEhek2GZ2kRKyi7J9kdCSmUJ7E-ks5rYJbqgaJpZM4G9lNR
.

[retorquere]

Yep, that did it. Good enough for me, I don't see anything I can't live with and plenty I wouldn't want to do without 👍

[JayHoltslander]

Currently creating a Wordpress theme utilizing Materialize and discovered this .browser-default issue while editing content and trying to put in a <ul>. Quite inconvenient if someone who just wants to write content suddenly has to edit the code to add classes to the list.

I'm going to have to disable this.

Would be far better to have a <ul class="unstyled"> than breaking all existing content lists.

[JayHoltslander]

My Wordpress fix for this was:

SCSS
section[id*="post-"] .card { ul {list-style-type: initial; padding-left: 30px; margin-top: 10px; margin-bottom: 15px;} li {list-style-type: initial;} }
The selector allows for the <ul> to remain unstyled everywhere else but when a list appears in my theme's content area within <section id="post-1234"><div class="card"> ... </div></section> it get's normal list styling.

[keeferrourke]

Is there a good reason that ul styling is globally stripped at all? The browser-default classes seems like a bad solution when the bullets could only be stripped from elements that should not display them (such as navbars, tabs, etc.)

[jtebert]

^ I'm with this guy. The default behavior of lists being no bullets and no indentation doesn't make any sense from a content perspective. Adding the option to specify the browser-default class is also an inelegant solution. For example, lists generated by Markdown (my current use case) must be somehow hackily edited in order to display list a normal list.

[tomscholz]

Whoops, closing again. See this comment for information regrading this topic https://github.com/Dogfalo/materialize/issues/5004#issuecomment-326652456

[phu]

Maybe I'm missing something, but I don't see anything relevant in that thread.

[tomscholz]

See this comment https://github.com/Dogfalo/materialize/issues/5004#issuecomment-326627742
We will move away from styling native elements and .browser-default. I understand, that it is really frustrating, but it is currently very unlikely that this will ship with v1. If you want, you can create a PR, which fixes this. In this case I would make the PR against the v1-dev branch...

[mrdnote]

Tom, great product, but indeed please remove browser-default asap. We have a site where users can add their own content thru an in-page html editor, we cant expect end user to add "browser-default" classes to their lists right?

Any idea when this will be included in a release?

[firanto]

Now I realize that this approach is somehow .... weird. I mean, why do we have to define .browser-default to revert back? I just add CKEditor and found that when user editing anything within the editor, unordered list will not have bullets (and not indented too).

[JayHoltslander]

Almost a year later and here I am again looking for the fix that I did last time. (Sigh)
So frustrating.

[Dogfalo]

@JayHoltslander We'll be fixing this after 1.0 release. We understand this can be a frustrating problem.

[ray007]

Isn't it harder to fix after 1.0 since it would be a breaking change?
Just restyling all ul elements is just bad style, that's what classes are for.

[JayHoltslander]

For others... my fix this time.

HTML

````html

...

````

SCSS

scss .browser-default-uls { ul { padding-left: 30px; margin-top: 10px; margin-bottom: 15px; li { list-style-type: disc!important; ul { li {list-style-type: circle!important;} } } } }

[jvillemare]

For those looking for a simple fix, I just use:

```

• ...
...

[ray007]

I still think overriding all lists and requiring the user to add browser-default is evil.

[firanto]

I can't override the third party library I used. So adding browser-default is not an option.

[JayHoltslander]

@JayHoltslander We'll be fixing this after 1.0 release. We understand this can be a frustrating problem.

Was looking for this one in the Feature Request Board and didn't see it.

[jvillemare]

@JayHoltslander We'll be fixing this after 1.0 release. We understand this can be a frustrating problem.

Was looking for this one in the Feature Request Board and didn't see it.

Only collaborators of this repo can add it there. @acburst, may we please get one last quick look at this issue? Still seems to be a problem for some devs.

[ricoms]

I rather have the default behavior with the default use. I believe Materialize choice on changing the expected behavior of a common and important text structure is basically wrong.

Explaining my case, I've built a GitHub page in which many people will need to input content. Most of them using simple Markdown syntax. As they understand basics Markdown and many of them use unordered list, which is an important text structure, I would not require or teach them all (or teach them all) on how to use HTML, define style or class of any type to its unordered list.

What I did is to change materialize.css and materialize.min.css from :not(.browser-default) to .materialize. The result is below:

ul.materialize {
  padding-left: 0;
  list-style-type: none;
}

ul.materialize > li {
  list-style-type: none;
}

This way, the navbar, which I implement, will use materialize class. And this leaves the default behavior when my content creators want to use markdown unordered lists.