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:
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.
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>
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.
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.
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.
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.
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.
