Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8123251

LI inside UL not rendered properly

XMLWordPrintable

    • web

      The LIs inside the UL are not rendered (visible) as in Chrome/Firefox/IE.
      The problem originated from http://codemirror.net/demo/complete.html but I'll attach a stripped down version of the CSS/HTML. To test it on code mirror go to the mentioned URL, click in the code area and press Ctrl-Space. A popup should appear, but it's mostly white in WebView. It is correctly displayed in Chrome/FF/IE9.

      About my test case: the only important CSS styles are .ulcss and .licss.
      If I change the border-radius to 0 (either in .ulcss or .licss) the problem disappears. Also removing the overflow/position attributes makes the problem go away.

      LE: I can't find the attach a file option :( , so here is the code. Feel free to edit title/code/message/whatever.

      <!DOCTYPE html>

      <html>
        <head>
          <style type="text/css">
            li {
              margin: 4px;
              padding: 10px;
              border: 1px solid green;
            }
            ul {
              border: 1px solid black;
              padding: 5px;
            }
            
            .ulcss {
              position: absolute;
              border-radius: 2px;
              overflow-y: auto;
            }

            .licss {
              border-radius: 30px;
              overflow: auto;
            }
          </style>
        </head>
      <body>
        <ul class="ulcss">
          <li class="licss">Aaaaaa</li>
          <li class="licss">Bbbbbb</li>
          <li class="licss">Cccccc</li>
          <li class="licss">Dddddd</li>
        </ul>
      </body>
      </html>

            peterz Peter Zhelezniakov
            andreijfx Andrei (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:
              Imported: