How do I make the Android WebView not ignore the 'height' css property?

Issue

I'm trying to make some little circle indicators similar to what you might typically see at the bottom of a slide carousel to indicate which slide it is on. What I've got so far is in this JS Fiddle: http://jsfiddle.net/LSmSS/.

Here's the HTML:

<ul class="carousel-indicators">
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

and the CSS:

.carousel-indicators {
  position: absolute;
  bottom: 5px;
  left: 50%;
  z-index: 15;
  width: 100px;
  margin: 0 0 0 -50px;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  margin-right: 2px;
  text-indent: -999px;
  border: 1px solid #333;
  background-color: #333;
  border-radius: 5px;
  cursor: pointer;
}
.carousel-indicators .active {
  background-color: white;
}

That seems to work on most browsers, including the default Android browser:

but in an Android WebView, the circles appear as little lines, and it appears to ignore the height property:

I've tried this on Android 2.3, 4.0, and 4.1 with the same results.

Is there something wrong with my CSS, or is the Android renderer just garbage? If the latter, are there any CSS experts out there that know how I might style my <ul> such that it will display correctly in an Android WebView? I, of course, don't care about all of the other JSFiddle stuff that Android screws up, just the little circles. In fact, I don't even care if they are circles... if someone can figure out how to make it not ignore my height property and just display some little squares, or something, I'd be happy with that too. :)

EDIT: I also tried putting a 'height' property on the <ul>, instead of just the <li>, but the android renderer still ignores it...

Solution

I had the same problem as yours,and I just find the reason.Maybe you can try what I done.

Just set:

webSettings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

Maybe it is LayoutAlgorithm.SINGLE_COLUMN that cause the problem.

Reference to Documents, SINGLE_COLUMN is also marked with Deprecated.

Answered By - socow