There seems to be a bug in acquia slate which breaks the display of bullet lists in the content area when the content of the li is wrapped in a p tag.

It seems to me that the main cause of this bug is list-style-position:inside; which is set in style.css (line 159) and style.css (line 165)

You may prefer to use "#content-wrapper .node .content ul" as a selector, but I thought the more general selector below was better to encompass output from views. I have not tested this much, so be warned.

I also added a margin-left attribute to counter the values set elsewhere which were appropriate for the inside list-style-position.

/*style.css (line 159)*/
#content ul {
  list-style-position:outside;
  list-style-type:disc;
  margin-left:1.5em;
}
/*style.css (line 165)*/
#content ol {
  list-style-position:outside;
  margin-left:1.5em;
}

Nested lists get the same disc bullet for all levels. The following lines make it so that nested lists are differentiated.

#content ul ul {
  list-style-type:circle;
}
#content ul ul ul {
  list-style-type:square;
}

The following simply adjusts the settings made at style.css (line 202), to reduce the padding on li elements

/*style.css (line 202)*/
#content-wrapper .node .content ol li, #content-wrapper .node .content ul li {
  padding:0 0 0 6px;
}

Comments

jeremycaldwell’s picture

Any reason why you would be using a paragraph tag within a list item? I'd like to see a screenshot of that as well if possible, curious to see how it behaves. Ideally you don't want to use paragraph tags within a list item as those are used for lists of content/data and not paragraphs.

stephthegeek’s picture

Status: Active » Closed (works as designed)