Stars are not coming inline (in row)

[amitbravo]

at Ionicframework, stars are not coming a one row , I tried to change in ionic-rating.css ul.rating li { } but does not change anything, however, i can see there is already display: inline being used but it is not working .

[toxic2302]

same problem here +1

[vlafranca]

Hi, You must have a css conflict somewhere, I already got this issue and it was because of a rule being overwritten somewhere (it was long time ago and I don't remeber unfortunately) You can check this codepen as an example : http://codepen.io/vlafranca/pen/GoxVKL

I recommend you to inspect the stars with a debugger (chrome, firefox etc.) and look at the css rule being overwritten.

[toxic2302]

Hey, thanks for this little tutorial but it doesn't work. I'm using this rating tag in an <form> element between two <input>fields. I have added a css class with display: inline-block but it doesn't change anything.

Do you have some more tricks for me? :smile:

[vlafranca]

Can you make a codepen please ? Le 3 juin 2016 12:36 PM, "Florian Kolb" [email protected] a écrit :

Hey, thanks for this little tutorial but it doesn't work. I'm using this rating tag in an

element between two fields. I have added a css class with display: inline-block but it doesn't change anything.

Do you have some more tricks for me? 😄

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fraserxu/ionic-rating/issues/32#issuecomment-223547028, or mute the thread https://github.com/notifications/unsubscribe/AHTaSyULA6iH6ReOa1At4CZZkxqTHliXks5qIAPEgaJpZM4IJlAR .

[toxic2302]

Codepen is created and it works but not in my project :(

http://codepen.io/toxic2302/pen/ZOGpdp

[vlafranca]

So the error comes from your project ^^ you have to debug ... Le 3 juin 2016 1:14 PM, "Florian Kolb" [email protected] a écrit :

Codepen is created and it works but not in my project :(

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fraserxu/ionic-rating/issues/32#issuecomment-223553268, or mute the thread https://github.com/notifications/unsubscribe/AHTaSyBTvg5l2CdEhvdYXsnZbbdHNKtSks5qIAyjgaJpZM4IJlAR .

[toxic2302]

Yes I have to debug my project. I think it crashed with the materialize css. I have tested this in a diffrent codepen. http://codepen.io/toxic2302/pen/VjLmeG

[ciroanacleto]

I have the same issue. I'm using the component inside a <li> element with ng-repeat. For example:

<ul class="list">
    <li ng-repeat="comment in dish.comments | orderBy:orderText">
        <blockquote>
            <rating readonly="true" ng-model="comment.rating" max="maxRating"></rating>
            <p>{{comment.comment}}</p>
        </blockquote>
    </li>
</ul>

If the css class it's being overwritten must be by the ionic css classes. How I can solve this ?

[ciroanacleto]

Hi, as @vlafranca said, there were a css class overwriting my <li>tag and so the stars not comming in line. I copied the directive css class and add in my project css file. This way worked fine.

[toxic2302]

Thank you @ciroanacleto. I have copied the css classes from ionic-rating in my own style.css and now it works. ;)

[ciroanacleto]

@toxic2302 There are a better way. Import the directive's css in your index.html, like this :

<link href="lib/ionic-rating/ionic-rating.css" rel="stylesheet">

Will work too.

[wasa4587]

<link href="lib/ionic-rating/ionic-rating.css" rel="stylesheet"> Worked for me