search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.65k stars 5.49k forks source link

List not displayed correctly #2179

Closed dmcdougall closed 11 years ago

dmcdougall commented 11 years ago

When I use a list, it is not displayed correctly. The bullet points do not align with the heading. The behaviour I expect is the the bullet points should align with the other content. Here is a screenshot of the behaviour I see:

Screen Shot 2013-04-14 at 09 57 16

Here is code from inside the <body> tag that recreates my problem:

<body>
  <div class="row">
    <div class="large-10 columns" role="content">
      <h3><a name="research">Research Interests</a></h3>
        <ul class="disc"> 
          <li>Data Assimilation</li>
          <li>Computational Bayesian Inverse Problems</li>
          <li>Computational PDEs</li>
          <li>Markov chain Monte Carlo sampling</li>
          <li>Uncertainty Quantification</li>
        </ul>
    </div>
  </div>

  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
dmcdougall commented 11 years ago

Furthermore, it appears that nested lists do not display with an extra level of indentation. They appear flush with the parent list.

emilhem commented 11 years ago

Try my solution in this issue: https://github.com/zurb/foundation/issues/2110

I confirmed that it's working in Firefox and Chrome.

dmcdougall commented 11 years ago

@emilhem Thanks! That fixes the alignment issue for the bullets. However, it does not shift nested lists to have an extra level of indentation.

emilhem commented 11 years ago

Try adding a class to the nested ul giving it extra margin to the left.

I haven't tested it.

dmcdougall commented 11 years ago

@emilhem I'll try that when I get home tonight. Thanks for the suggestion. I am confused, though, as to why there doesn't appear to be an extra class in documentation page. If you view the source of the page and scroll down to the "Lists" section, it appears as though nothing extra is done to achieve the correct layout.

ascottmccauley commented 11 years ago

list-style-position - Basic CSS.

According to typography standards the hanging bullets are preferable for readability. Here is a good article on the subject: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-2

dmcdougall commented 11 years ago

@ascottmccauley Yes, @emilhem already suggested that, and it works wonderfully. And I also see this override in Foundation's docs.css file. What I don't understand is why nested lists are not indented properly. There appears to be no extra class applied to nested elements in the docs.css file, yet the indentation is perfect.

dmcdougall commented 11 years ago

I have figured out the problem. I was doing the HTML incorrectly. My code looked something like:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <ul>
    <li>Nested list item</li>
  </ul>
</ul>

Instead, this is the correct way to do nested lists:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Nested list item 1</li>
    </ul>
  </li>
</ul>

Thanks for the help @emilhem and @ascottmccauley. I'll close this now.

cabello commented 10 years ago

Although this one is closed, it was discussing two things:

For the second one, the author of the issue figured out it was his own fault and closed the issue.

Lets go back to discuss the first one for a moment, even though people are saying just use list-style-position, the project documentation right now has this alignment problem as you can see in the screenshot:

screen shot 2013-11-15 at 10 49 56 pm

Is that a real problem with bullets in list or an expected behaviour?