Geek Answers Handbook

How to display a list of bullets using an ionic structure?

Using ionic to build the application, and I need to display the actual list of tokens:

  • item 1
  • item 2
  • item 3

However, it seems that the framework implements some CSS types reset / magic on <ul> and <li> , so they should be used only as structural elements (for example, a list), and not as a user interface.

I ended up creating my own CSS unordered-list style to give me the interface I need. Is this the right way to do it myself - or does ionic have some kind of CSS style deeply hidden inside that I should have used instead?

ty in advance.

+7
css layout ionic-framework
source share
3 answers

Just overwrite reset.

 ol, ul { list-style: none; }

Like it (place in CSS after CSS frame)

 ul { list-style-type: disc; }

Best practice: set the class in the navigation element, namely ul.

 <section> <ul class="my-nav"> <li>List item</li> <li>List item</li> </ul> </section> .my-nav { list-style-type: disc; }
+10
source share

You can give a class to 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

+2
source share

I also could not see the bullets, they simply were not on the visible page. Adding some add-ons fixed this:

 <style> .my-modal-list { list-style-type: disc; padding: 20px; } </style> <ul class="my-modal-list">
+1
source share

More articles:


All Articles