how to display a bullet list using ionic framework

Question

Using ionic to build an app, and I have a need to display an actual bullet list:

• item 1
• item 2
• item 3

However, it appears that the framework does some sort of CSS reset / magic on <ul> and <li> elements such that they should only be used as structure elements (e.g. a list), rather than as UI.

I ended up creating my own unordered-list CSS style to give me the UI I needed. Is that the right way to do-it-yourself - or does ionic have some CSS style buried deep inside that I should have used instead?

ty in advance.

Answer 1

You can gave a class for the ul element and define your own style.

HTML:

<div id="list">
  <h5>Just three steps:</h5>
  <ul>
    <li>Be awesome</li>
    <li>Stay awesome</li>
    <li>There is no step 3</li>
  </ul>
</div>

CSS:

#list {
  width: 170px;
  margin: 30px auto;
  font-size: 20px;
}
#list ul {
  margin-top: 30px;
}
#list ul li {
  text-align: left;
  list-style: disc;
  margin: 10px 0px;
}

See demo

Answer 2

I could not see the bullets either, they were just not on the visible page. Adding some padding fixed it:

<style>
.my-modal-list {
    list-style-type: disc;
    padding: 20px;
}
</style>

<ul class="my-modal-list">

Answer 3

Just overwrite the reset.

ol, ul {
  list-style: none;
}

Like this (place in your CSS after the CSS of the framework)

ul {
  list-style-type: disc;
}

Best practise: set a class on the navigation element namely the ul.

<section>    
  <ul class="my-nav">
    <li>List item</li>
    <li>List item</li>
  </ul>
</section>

.my-nav {
  list-style-type: disc;
}