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? 😄

[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
#32 (comment),
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
#32 (comment),
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