CODEWITHSUNDEEP
javascripthtmlcsshtml-lists
Josh Sherick
Josh Sherick

Reputation: 2161

How to emulate HTML unordered list behavior?

I am making a to-do checklist webapp and I am using Raphael SVG icons as the checkmarks and status icons next to the list items.

As far as I know, this means that I can't use the standard unordered list bullet-point deal.

Here is what I am using for the list items:

<li class='list-item'><span class='item-status'></span> <span class='item'>List Item 2</span></li>

I insert the checkmark icon inside the item-status class span with Javascript (Raphael).

and here is my CSS

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li {
    padding-left: 14px;
}
span.item-status {
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
    cursor: pointer;
}
span.item {
    vertical-align: top;
}

That's fine if the "list item" is less than one line, but if it is more than one line it makes it look like this: enter image description here

and I want it to look more like this (mockup):

enter image description here

TL;DR: I want it to look like that second picture, not the first.

Upvotes: 0

Views: 713

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201738

Since this is structurally tabular data, a table element is the most natural solution. It is also the most robust, since it works even when CSS is disabled:

<table>
<caption>List Title</caption>
<tr valign=top><td>✓<td>List Item Lorem Ipsum Dolor Sit Amet This is a
pretty long to do people really shouldn’t make
them this long
<tr valign=top><td>✓<td>List Item 2
</table>

You can use CSS to make the list title appear in large size and bold

For simplicity, I have used the CHECK MARK character. Replacing it by the use of an icon font trick does not affect the problem presented. (But I would use a simple image rather than such a trick.)

Upvotes: 0

dandavis
dandavis

Reputation: 16726

this looks like something along those lines to me:

<style>
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    padding-left: 14px;

}

span.item  { width: 7em; }

span.item-status, span.item  {
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
    cursor: pointer;
}

</style>

<ul>
  <li class='list-item'><span class='item-status'>*</span> 
       <span class='item'>List Item 2 List Item 2 List Item 2 List Item 2 </span></li>
  <li class='list-item'><span class='item-status'>*</span> 
       <span class='item'>List Item 3 List Item 3 List Item 3 List Item 3 </span></li>
</ul>

Upvotes: 1

Related Questions