Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Css Override question

Arm Brahaj
9 years ago Jun 25, 2012 8:24am

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!

Charles Anthony
9 years ago Jun 25, 2012 8:46am

This should work - simplest is usually best

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

Cheers,

Charles

Last updated on Jun, 25th 2012
Arm Brahaj
9 years ago Jun 25, 2012 9:10am

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

Charles Anthony
9 years ago Jun 25, 2012 9:39am

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.

Last updated on Jun, 25th 2012