Rating icons display vertically

[maxratajczak]

When I display the rating, the icons are stacked vertically, I tried setting it in a flexbox but it didn't help.

[awran5]

Hi @maxratajczak

Try to add the flex className to emptyClassName prop:

<Rating 
...
emptyClassName="flex"
...
 />

Or add some CSS to your stylesheet:

.react-simple-star-rating .filled-icons {
  display: inline-block !important;
}

.react-simple-star-rating .empty-icons {
  display: flex !important;
}

[sumanthpweb11]

Tried it all Shows Vertical please fix it

[micartey]

I have the same issue 👀

[HardeepsinhSodha]

Change SVG element display property from block to inline-block. I am using Tailwind CSS so I can directly do this by adding class "inline-block". You might need to create "inline-block" custom class. <Rating ... SVGclassName="inline-block" />

[yuuriresende]

Thanks @HardeepsinhSodha !!

[OttlikG]

The following fixed me:

<Rating
    ...
    SVGstyle={{display: "inline-block"}}
/>

By the way I use Chakra UI, its global CSS might break the CSS.

[michael-2509]

@HardeepsinhSodha, @awran5 I am using tailwind and have tried the SVGclassName approach and it still appears vertical

[Baalamurgan]

@HardeepsinhSodha, @awran5 I am using tailwind and have tried the SVGclassName approach and it still appears vertical

Same issue here!

[pmkod]

https://github.com/awran5/react-simple-star-rating/issues/41