Item12957: Icon Twisty with Bullett Point

I am trying to create an icon TWISTY with a bullet like :

• Review/Analyze the DLP Event utilizing these guidelinesClose
  • Test
  • Test
    • Test
    • Test
  • Test
    • Test

But if the bullet follows the TWISTY it moves the left bar to the right side of the page.

-- NathanJulian - 06 Jul 2014

This is due to the way the HTML is generated. It can be a bit tricky to get these to render correctly. The list elements are HTML block elements, so your first bullet begins the list, opening a block tag, the <ul< unnumbered list. You don't ever want to end up with HTML generated with interleaved blocks. So the normal list looks something like this.

<ul>
  <li> ... </li>
  <li> ... </li>
</ul>

I made a couple of changes to your example, but mainly indented the %ENDTWISTY% to contain it within the list. By having the %ENDTWISTY start in the 1st column, it closed the list, so the HTML generated was:

<ul>   (open your list)
  <div ...>    (The Twisty block that is displayed/hidden)
     <ul>   The level2 list 
     ...
     </ul>   End level 2 list
</ul>  Close level 1 list
</div>  Close the TWISTY div   *** PROBLEM ... Out of order ***

Notice that the blocks open close out of order. By indenting the %ENDTWISTY, it swapped the closing tags for the list and the div.

-- GeorgeClark - 24 Dec 2014

Whenever you see elements jumping around, and general rearranging of the page, it's a good clue that there are some out-of-order div's

-- GeorgeClark - 24 Dec 2014

Commenting is disabled while not logged in