Stars appearing vertically

[HarkiratShopism1]

I am using tailwind css in my project and after I installed tailwind I am experiencing a vertical alignment of stars

Can someone help me sort this out.

[baydisng13]

I am also facing the same issue in my Next.js and Tailwind projects.

when I pass the props emptyClassName="flex" no change but
when I pass the props emptyStyle={{display:"flex"}} will render horizontally but not function as it should be
Specifically, even if I select multiple stars, only the first star shows as filled. See the screenshot below for an example where I selected 4 stars but only the first star is filled:

[henaorth16]

Make the wrapper div flex flex-col h-auto

[HarkiratShopism1]

Make the wrapper div flex flex-col h-auto
I tried to implement the above mentioned suggestion the stars are aligned horizontally after implementing but when I try to select multiple stars, only the first star shows as filled.

[Tallal64]

@baydisng13 pass the prop "SVGclassName={inline-block}" instead of "emptyStyle={{display:"flex"}}" and hopefully it will fix the problem.

[m-lyon]

@Tallal64 this does not resolve the issue for me. Instead, i set SVGstyle={{ display: 'inline-block' }} which resolved the issue.

[undermad]

Hey, That works for me

<Rating
            SVGclassName={'inline-block'}
            initialValue={4}
            readonly={true}/>

[zaadevofc]

I am also facing the same issue in my Next.js and Tailwind projects. when I pass the props emptyClassName="flex" no change but when I pass the props emptyStyle={{display:"flex"}} will render horizontally but not function as it should be Specifically, even if I select multiple stars, only the first star shows as filled. See the screenshot below for an example where I selected 4 stars but only the first star is filled:

thanks its work for me

[KhaliLounis]

none of the fixes above worked for me anything new ?

[agusdwimilniadi]

none of the fixes above worked for me anything new ? i worked with #53 (comment)

[pantharshit007]

Explanation of how problem is getting solved:

I spent some time twerking in dev tools on the browser, and that's when I found this:

and changing here block to inline fixed the problem now all that's left is to check how to change SVG class properties which you can find in the Rating.d.ts file.

and after that when I checked the issue @Tallal64 already fixed that.

thanks, mate

[jkmuku]

The above solutions don't work when using custom icon

[jack-song]

The above solutions don't work when using custom icon

@jkmuku dunno if you figured this out, but on my custom icon i just set inline-block directly in the icon component and it works

[akarshshri]

I'm using version 5.1.7.

Okay so none of the above solution worked. Passing emptyStyle={{display:"flex"}} as prop worked but filling the star was only working for 1 star.

Next solution, passing SVGclassName={inline-block} as a prop didn't working. I was getting error in typescript.
I'm finally able to solve this issue by manually overriding the css.

.react-simple-star-rating :where(img, svg, video, canvas, audio, iframe, embed, object){
    display: inline !important;
}

[Smartech-git]

@baydisng13 pass the prop "SVGclassName={inline-block}" instead of "emptyStyle={{display:"flex"}}" and hopefully it will fix the problem.

This worked for me 💯