How do I use CSS in ion-list, ion-item


Tags: javascript,html,css,ionic-framework

Problem :

I am developing an app and I am getting data from JSON and it works well, but my problem is that I don't know how to use CSS style using the directive. Below I am showing the code. The second code is the code that the css works.

<!-- With Json </!-->

<ion-list>  
    <ion-item>

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

    </ion-item>
</ion-list> 


<!-- example static, without json, css works good  </!--> 
<div class="list" id="inicioPalestrantes" >
   <a class="item item-avatar" id="palestrantes" href="#">
     <img src="Fiona.jpg">
     <h2>Fiona Doohan</h2>
     <p> UDC, Dublin, Ireland </p>
   </a>
</div>


Solution :

You need the id selector # better use the class instead of id for your CSS rules.

.list .item {
  background-color: #F0F8FF;
  border-width: 1px;
  border-style: ridge;
  border-color: #C0C0C0;
}

.list {
  margin-top:0%;
}

    CSS Howto..

    How do I stop this div's width from decreasing?

    How to check a website in BlackBerry Simulator

    How to find CSS deceleration for :hover state using Chrome's inspector

    How to make below style:

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How to make divs appear and disapear on hover in css?

    How to make sure the users see the new logo?

    How to add a half circle at the bottom middle of my header?

    How to set a minimum content size of a webpage in html, css? [closed]

    How to hide element using Class; instead of using css function in JQuery? [closed]

    How to reset jQuery toggled classes applied throughout the page? (AngularProject)

    How to inherit height in div?

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How to swap two button elements using float in CSS

    How to trim off Image in CSS?

    how to change “product details” text to my own text in Virtuemart?

    how to put a css class inside of a css class?

    sencha touch 2.0 : How to apply conditional background color to list item

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to customize the HTML5 input range type looks using CSS?

    How can I set a google-font as default-font in CKEditor?

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    Option element bigger than select box - how to get the options list to expand to the left?

    How to reach CSS zen?

    Confusion as to how clearfix actually works

    How can I fix Buttongroup Dropdowntoggle-Buttons in Bootstrap?

    How to add a margin to a paragraph?

    How do I make XAMPP use the paths from my Wordpress themes folder?

    How to configure a child div to display scrollbars only when a parent div percentage settings require it

    Only Javascript code to show a class without onclick