How to use css in ion-list, ion-item?

Posted on

Question :

Hello, I’m developing an app and on this screen I’m getting data from a json, so I have to use ng-repeat, but this way I can not use the css styles because it does not accept div or other mode (at least as I’ve tried).



           <a class="item item-avatar" ng-repeat="x in names|orderBy:'Name'"  href="#">
              <img ng-src="{{x.Image}}">
              <p>  {{x.Local}}</p>



Answer :

The code without json and with css working is this:

<a class="item item-avatar" id="palestrantes" href="#">
  <img src="Fiona.jpg">
  <h2>Fiona Doohan</h2>
  <p> UDC, Dublin, Ireland </p>


To use css in Ionic you can create a direct class in the ion-list, and control the style of the component, in this case you can avoid using html tags and using the framework components.

ion-list.custom ion-item {
  background: green;

ion-list.custom ion-label {
  background: red;
  color: #FFF;
<ion-list class="custom">


Leave a Reply

Your email address will not be published. Required fields are marked *