Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Css Override question
Sorry for asking such a direct question, but it is driving me crazy this css override.
I have the following generated code under a label:
<div class="v-label v-label-wikiarticle wikiarticle" style="height: 400px; width: 1288px; "><h1>Title</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
How can I override the default li style-type which is set to none!?
I am trying with
div .wikiarticle .v-label-wikiarticle {list-style-type: square;}
.v-label .v-label-wikiarticle .wikiarticle ul li {list-style-type: square;}
or other combinations, but it is just not working!
This should work - simplest is usually best
.wikiarticle ul li {
list-style-type: square;
}
Cheers,
Charles
Hello Charles,
Thx for the reply.
I have tried that one as well... it did not work! :(
Well, I just copied the HTML snippet you provided into an HTML document and it did work, so something's not quite right here.
Are you using Chrome? It's *very* aggressive at caching CSS... try flushing the cache (Ctrl + Refresh)
Here's the HTML I used to test my CSS suggestion, andd attached is the result.
<html>
<head>
<style type="text/css">
.wikiarticle ul li {
color:red;
list-style-type: square;
}
</style>
</head>
<body>
<div class="v-label v-label-wikiarticle wikiarticle" style="height: 400px; width: 1288px; "><h1>Title</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
</html>
Cheers,
Charles.