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.

JohanVdR · Accepted Answer · 2014-03-30T12:55:13.963

16

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;
}

edited Mar 30 '14 at 12:55

answered Mar 30 '14 at 12:48

JohanVdR

2,880
1
15
16

You can also can do article ul or section ul depending on which uls you would target. – JohanVdR Mar 30 '14 at 13:04
3

Don't forget to override margin/padding, which are also reset. Otherwise your bullet might be off-screen or cut-off by a parent element. – JoshuaDavid Mar 24 '15 at 23:12
1

Specifically for the margin/padding, you'll want to add this to the ul CSS, not the li CSS, e.g. `ul, ol { list-style-type: disc; padding-left: 20px; }` – Matt McMinn Dec 11 '16 at 05:19

newTag · Answer 2 · 2014-03-30T12:56:38.127

3

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

edited Mar 30 '14 at 12:56

answered Mar 30 '14 at 12:50

newTag

2,149
1
22
31

list-style: circle shows the bullet as the outline of a circle. Should be list-style: disc. It should be ul not ol. – JohanVdR Mar 30 '14 at 12:52
@JohanVandenRym Thanks for noticing :). I have updated my answer and demo. – newTag Mar 30 '14 at 12:56

score 1 · Answer 3 · answered Dec 06 '17 at 18:59

1

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">

answered Dec 06 '17 at 18:59

Noel McKeown

281
2
8

score 0 · Answer 4 · answered Mar 29 '20 at 08:57

0

Try This :

<ul style="list-style-type:disc;">
 <li>
   item1
 </li>
 <li>
   item2
 </li>
 <li>
   item3
 </li>
  <li>
   item4
  </li>
</ul>

answered Mar 29 '20 at 08:57

Thameur Daly

219
2
12

how to display a bullet list using ionic framework?

4 Answers4

Linked