How do I use default <li> bullets when the <li> has been co-opted for an accordion?

css3

#1

I am using the accordion feature of materializecss. Each accordion is a ul, and each "drawer" is a li. So the default unordered list style has been co-opted to make the accordion.

I want to make a default unordered list. Right now I am using < br>• to make a bullet list of items. But the lines wrap and are flush with the bullet instead of being fully indented.

How do I get the default style of unordered lists in this kind of scenario?

This does not create bullets, but it does indent everything:

li.defaultlist {list-style-type:disc;}

<ul>
<li class="defaultlist">a</li>
<li class="defaultlist">b</li>
</ul>

#2

Not exactly sure about the scenario, is your list within the accordion?
You will need to apply css through a selector at least as specific as that which removes the default style.

I would probably apply the class to the ul to avoid the repetition on the li.
If you tried that and it did not work, you may need a more specific selector.
Seeing the code that removes the default styling may help.


#3

Looks like this is the only styling that works. If I apply it only to the ul, then only the first li gets styled.

ul li .defaultlist {display: list-item; list-style-type:disc;}

<ul class="defaultlist">
    <li class="defaultlist">TESTING for other reasons. These are not included.</li>
    <li class="defaultlist">TESTING Some editions' records are lost because we deleted them when they became unlicensed or for other reasons.</li>
</ul>

#4

It seems odd applying the same class to the ul and the li.

How come? What selector were you using?
Using the html:-

<ul class="defaultlist">
    <li>TESTING for other reasons. These are not included.</li>
    <li>TESTING Some editions' records are lost because we deleted them when they became unlicensed or for other reasons.</li>
</ul>

You could have:-

.defaultlist li {
    display: list-item; 
    list-style-type:disc;
}

If that's not specific enough, you can add the preceding li, then maybe the first ul to give the selector more weight if required.


#5

I tried it your way and not all the li's got bullets.


#6

WebSteve, do you understand the problem?

To target a different set of list items, you need to override the styles assigned by materializecss CSS and possibly other styles that may be imposed by other plug-ins that we are as yet unaware of.

Specificity is the key to overrides. Look it up and study it if you don't know what specificity means. Overrides are usually (but not always) accomplished by adding classes to the new <ul> and possibly the new <li> list items. However, it is done, the overrides must either be the same "weight" (specificity) as those being overridden and must be placed later in your CSS than those being overridden OR the overrides must have greater specificity ("weight") than those being overridden.

Without access to the complete code affecting the site, all we can do is guess. So far, it appears that you do not know enough about HTML and CSS to understand simple overrides. It's essential that you know how to use the browser's dev tools to read the HTML and CSS.

Create a test page. Study the concept of specificity. Experiment with it. Apply it to your site. You will have learned something and fixed your problem all by yourself.

Otherwise, give us a link to your test site so we can see the all of the code instead of just an isolated peek. As a rule of thumb, HTML and CSS does not work in isolation to its surroundings. It's a whole package.


#7

When you use frameworks like this you need to read through the documentation to understand how they work.

First thing I did was find the collapsible accordion feature

Then I used my browser inspector to see what was going on.

The offending rules are located on line 2599 and 2604 in materialize.css

ul:not(.browser-default) {
  padding-left: 0;
  list-style-type: none;
}

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

There was discussion about the lack of default list styling on github
Unordered lists show up without any styling #2582

After reading through it I found that you can reinstate the default with the .browser-default class they provide.

It is explained in the "Helpers" section.
https://materializecss.com/helpers.html#browser-default

Browser Defaults

Because we override many of the default browser styles and elements, we provide the .browser-default class to revert these elements to their original state.

Name of Element & Reverted Style

  • UL - Bullet points

  • SELECT - Browser default select element

  • INPUT - Browser default input


#8

I thought that by adding the class to the UL and LIs I was being more specific. I thought I understood the problem.


#9

Oh, this is very helpful. You've given me a new tool of thinking to use in the future!


#10

Here's what I would do if I were using materialize.

I would comment out (or delete it) line 2604

/* ul:not(.browser-default) > li {
  list-style-type: none;
} comment this selector out */

There is no reason to set list-style none on your <li> anyway. That property belongs on the parent, the <ul>, and it inherits to the li.

After doing that you should only need the default class on the UL

<ul class="browser-default">

There's no reason to clutter up the <li>s with duplicate classnames :slight_smile:


#11

By adding a classname to the UL or LI, you are being more specific. But, because you did not look at the original code, you did not realize that just adding a classname did not increase the specificity enough. As I said, you need to be able to read and evaluate the code to know how to override it.

Fortunately for you, @Ray.H performed a thorough analysis of the original code, especially the materializecss code. He then went further and searched to see if it was known to be an existing issue. Finally, he explained the rationale behind his very well considered solution.

Hope you learn something from Ray's example.


#12

Yes, this is VERY educational!!


#13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.