Css Override question

Vaadin 6 / 7 / 8 Framework UI
1

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!

2

This should work - simplest is usually best

.wikiarticle ul li {
  list-style-type: square;
}

Cheers,

Charles

3

Hello Charles,
Thx for the reply.
I have tried that one as well… it did not work! :frowning:

4

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.
12414.png