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 can I have multiple jQuery button styles on one page?

    how to remove css from the text box?

    How SCSS rule evaluation done by browser

    How to create a image transition hover effect with css without breaking the grid layout

    how to make website more user friendly for mobile users [closed]

    How can I fill a fixed-size
    with a variable-size

    ?

    How to change first word color through css [duplicate]

    How to change the selection tip of custom cursor using css

    How to make CSS color transition time correctly with transform perspective?

    Show 100% of background

    Show and Hide option for DIV(needs modification)

    How to get rid of scrollbars around iframe

    How to place two section elements next to each other using CSS? [duplicate]

    how to make nested flexboxes work

    How to adjust CSS to make footer fixed height?

    How can I change the numbering of an order list's items?

    How to force dropdown boostrap buttons in a nav bar to fill the entire container width?

    How to zoom content to screen width

    How to target a braille / screen-reader via CSS

    How to add load more button for a HTML/CSS page?

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    How do I place an image after a link?

    CSS: How to move hint box (a:hover) to the left?

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    How to include child div into parent div automatically?

    What to do to align text as shown in the image using HTML and CSS?

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    how to replace url in css using regexp (javascript)

    How do I style jQuery UI tabs vertically with a correctly themed border?

    How to change the style of horizontal menu