Using percentage values for widgetDimensions or widgetDimensions makes widgets display vertically

[christofferaakre]

In the docs, all the examples use pixels for widgetDimensions and widgetDimension. I am using this library, and liking it alot, but now I need to set the size of the stars according to the width of their container. I tried doing something like this:
<Ratings rating={this.state.rating} widgetDimensions='20%'>
[<Ratings.Widget here]
.

This causes the widgets to line up (not quite) vertically as opposed to horizontally. I believe this is not intended functionality.

Attached is a screenshot of the issue.

[ekeric13]

So the widgetDimensions would make the svg element 20% of it's container, which by default has no width and there isn't a prop to set that.

widgetSpacings affects the padding, but it would be hard to get the stars perfectly aligned on one row as you are affecting the padding, and not the width.

I could create a widgetContainerDimensions prop which would get you partially there (affect the width of the svg container so you can set that to 20%), but you would still need to add in some more custom css.

I suggest ignoring inline styles and just creating your own css. Or maybe keeping the inline styles but add to the defaults via normal css

.widget-ratings {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

Because I am supporting older browsers it would be a lot of work to get it to be evenly spaced on one line, but if you can use flex than it should be pretty easy to do so.

Would that fix your issue?

[glassblowerscat]

When I try to add to the defaults with normal CSS as you suggest, my CSS gets overwritten by the default. I can set properties that the defaults don't set, but I can't overwrite the defaults (e.g., display: flex). I tried with a simple .css file import and with a module. How would one go about adding to the baked-in CSS?