search

awran5 / react-simple-star-rating

A simple react component for adding a star rating to your project.
https://react-simple-star-rating.vercel.app/
MIT License
136 stars 32 forks source link

[v5.1.7] Rating displays vertically by default using tailwind #41

Open michael-2509 opened 1 year ago

aybolid commented 1 year ago

Same issue. <Rating emptyStyle={{ display: "flex" }} fillStyle={{ display: "-webkit-inline-box" }} /> This should help

njoromyke commented 1 year ago

.style-module_emptyIcons__Bg-FZ { display: flex !important; }

njoromyke commented 1 year ago

In Next JS

renatoastra commented 1 year ago

Same issue. <Rating emptyStyle={{ display: "flex" }} fillStyle={{ display: "-webkit-inline-box" }} /> This should help

Thanks!!

vandercloak commented 1 year ago

The solution of using <Rating emptyStyle={{ display: "flex" }} fillStyle={{ display: "-webkit-inline-box" }} /> appears to no longer work for the latest Safari Version: 16.5.1. Working great in other browsers, just safari latest.

Anyone else experiencing this or found other solutions?

vandercloak commented 1 year ago

I got it working... But its VERY hacky... but in the hopes it saves someone else some time, here is what worked for me:

<Rating
  emptyStyle={{ display: "flex" }}
  SVGstyle={{ display: "inline-block", marginBottom: 10 }}
  style={{ marginBottom: -10 }}
  ...
/>

The stars were positioned wrong for some reason and the two margin styles resolved it for me so they yellow stars showed up correctly.

elvismdev commented 1 year ago

In Next.js 13 with Flowbite.