CODEWITHSUNDEEP
csslayoutionic-framework
thinkbigthinksmall
thinkbigthinksmall

Reputation: 904

how to display a bullet list using ionic framework?

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

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.

Upvotes: 10

Views: 24258

Answers (4)

Thameur Daly
Thameur Daly

Reputation: 319

Try This : 

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

Upvotes: 0

Noel McKeown
Noel McKeown

Reputation: 281

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

Upvotes: 1

newTag
newTag

Reputation: 2169

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

Upvotes: 3

JohanVdR
JohanVdR

Reputation: 2878

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

Upvotes: 16

Related Questions