Hi! Sorry to come back with more issues -_- It seems that the element is not resizing when the element is too small to fit all of the stars. I currently am using a custom SVG of 1 star for a 5-star rating in half increments.
Any reason why the element isn’t resizing? On mobile it is cutting off the last star, therefore limiting the rating to 4 stars our of 5
Hi @gbenchanoch
I’ll take a look at this in a little more detail tomorrow for you and get back to you as soon as I can.
No rush! For now, I just made the UI expand everything so that they fit. It’s a workable solution.
Ok brilliant, I shall take a look anyway and see what I can do, if I make a change or anything then I’ll let you know but glad you have a solution in place 
Hi @gbenchanoch
Just having a quick look at this and I wondered, do you have the “star width” property set to 0? A value of 0 should allow the stars to auto size based upon the width of the container (or element). They will shrink in size though so maybe the solution you have now is best. Just thought I’d ask anyway.
yup! I’ve tried both. Once interesting note, when I changed the spacing from 0 to 1, it showed all 5 stars but overflowed the container into a group to the right of the stars. That’s why I just split the row of two elements into two rows of one element to avoid the issue. NOTE: I’m using the word row but I’m still on the legacy engine.
Ok, well I don’t wanna rock the boat too much with the responsive side of things as I haven’t tested it out yet with Bubble’s new responsive engine yet. It works out it’s own element width and star sizes, I’ll have to play with it at some point but at least you have a working solution for now anyway. I’ll take another look at it when I get some time to play more.
Just to clarify - I’m not using the new engine.
@pork1977gm I am having a hard time getting the custom svg to load. it’s just blank.
I’ve tried:
SVG
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDIwNy41NDQgMjA3LjU0NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjA3LjU0NCAyMDcuNTQ0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNMTY4LjIyMiwwSDM5LjMxOUMxOC4wNTgsMCwxLjQwNCwzMS4xMTgsMS40MDQsNzAuODQ0YzAsMzkuNzI1LDE2LjY1NCw3MC44NDIsMzcuOTE2LDcwLjg0MmgwLjAwOGgyNy45Mjd2NjAuODY4DQoJCWMwLDIuNzU2LDIuMjM1LDQuOTksNC45OSw0Ljk5SDIwMS4xNWMyLjc1NSwwLDQuOTktMi4yMzQsNC45OS00Ljk5VjcwLjg0NEMyMDYuMTQsMzEuMTE4LDE4OS40ODUsMCwxNjguMjIyLDB6IE0zOS4zMjEsMTMxLjcwNg0KCQloLTAuMDAyYy0xMy40OSwwLTI3LjkzNi0yNC40NTYtMjcuOTM2LTYwLjg2MmMwLTM2LjQwNywxNC40NDUtNjAuODY0LDI3LjkzNi02MC44NjRzMjcuOTM2LDI0LjQ1NiwyNy45MzYsNjAuODY0DQoJCWMwLDE2LjgzMy0zLjIzOCwzMi41NzktOS4xMTYsNDQuMzM3Yy01LjI1LDEwLjUwMi0xMi4xMDcsMTYuNTI1LTE4LjgxMiwxNi41MjVIMzkuMzIxeiBNNTkuMDYyLDEzMS43MDYNCgkJYzIuOTI4LTMuMjc0LDUuNjIyLTcuMzAxLDguMDAzLTEyLjA2MmMwLjA2NS0wLjEzLDAuMTI1LTAuMjY3LDAuMTg5LTAuMzk4djEyLjQ2SDU5LjA2MnogTTc3LjIzNSwxOTcuNTY0di01NS44NzhoMjEuNjI2DQoJCWMyLjc1NSwwLDQuOTktMi4yMzQsNC45OS00Ljk5YzAtMi43NTYtMi4yMzUtNC45OS00Ljk5LTQuOTlINzcuMjM1VjcwLjg0NGMwLTI2LjE3MS03LjIzLTQ4LjYtMTguMjQxLTYwLjg2NGgxMDkuMjI5DQoJCWMxMy40OTIsMCwyNy45MzgsMjQuNDU2LDI3LjkzOCw2MC44NjR2NjAuODYyaC0xNy40NTljLTIuNzU1LDAtNC45OSwyLjIzNC00Ljk5LDQuOTljMCwyLjc1NiwyLjIzNSw0Ljk5LDQuOTksNC45OWgxNy40NTl2NTUuODc4DQoJCUg3Ny4yMzV6Ii8+DQoJPHBhdGggZD0iTTU1LjM4NCw3MC44NDRjMC0yNy44NjgtOC43MzUtMzMuNzE4LTE2LjA2Mi0zMy43MThjLTcuMzI3LDAtMTYuMDYxLDUuODUtMTYuMDYxLDMzLjcxOA0KCQljMCwyNy44NzEsOC43MzQsMzMuNzIxLDE2LjA2MSwzMy43MjFDNDYuNjQ5LDEwNC41NjUsNTUuMzg0LDk4LjcxNCw1NS4zODQsNzAuODQ0eiBNMzkuMzIxLDk0LjU4NQ0KCQljLTIuMzUxLDAtNi4wOC02LjQ0NS02LjA4LTIzLjc0MWMwLTE3LjI5MywzLjcyOS0yMy43MzgsNi4wOC0yMy43MzhjMi4zNTIsMCw2LjA4Miw2LjQ0NSw2LjA4MiwyMy43MzgNCgkJQzQ1LjQwNCw4OC4xMzksNDEuNjczLDk0LjU4NSwzOS4zMjEsOTQuNTg1eiIvPg0KCTxwYXRoIGQ9Ik0xNTIuMDg4LDEzMS43MDZoLTI2LjYxM2MtMi43NTUsMC00Ljk5LDIuMjM0LTQuOTksNC45OWMwLDIuNzU2LDIuMjM1LDQuOTksNC45OSw0Ljk5aDI2LjYxMw0KCQljMi43NTUsMCw0Ljk5LTIuMjM0LDQuOTktNC45OUMxNTcuMDc4LDEzMy45NCwxNTQuODQzLDEzMS43MDYsMTUyLjA4OCwxMzEuNzA2eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=
and
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 207.544 207.544" viewBox="0 0 207.544 207.544"><path d="M168.222 0H39.319C18.058 0 1.404 31.118 1.404 70.844c0 39.725 16.654 70.842 37.916 70.842h27.935v60.868a4.99 4.99 0 0 0 4.99 4.99H201.15a4.99 4.99 0 0 0 4.99-4.99V70.844C206.14 31.118 189.485 0 168.222 0zM39.321 131.706h-.002c-13.49 0-27.936-24.456-27.936-60.862 0-36.407 14.445-60.864 27.936-60.864s27.936 24.456 27.936 60.864c0 16.833-3.238 32.579-9.116 44.337-5.25 10.502-12.107 16.525-18.812 16.525h-.006zm19.741 0c2.928-3.274 5.622-7.301 8.003-12.062.065-.13.125-.267.189-.398v12.46h-8.192zm18.173 65.858v-55.878h21.626a4.99 4.99 0 0 0 0-9.98H77.235V70.844c0-26.171-7.23-48.6-18.241-60.864h109.229c13.492 0 27.938 24.456 27.938 60.864v60.862h-17.459a4.99 4.99 0 0 0 0 9.98h17.459v55.878H77.235z"/><path d="M55.384 70.844c0-27.868-8.735-33.718-16.062-33.718-7.327 0-16.061 5.85-16.061 33.718 0 27.871 8.734 33.721 16.061 33.721s16.062-5.851 16.062-33.721zM39.321 94.585c-2.351 0-6.08-6.445-6.08-23.741 0-17.293 3.729-23.738 6.08-23.738 2.352 0 6.082 6.445 6.082 23.738.001 17.295-3.73 23.741-6.082 23.741zM152.088 131.706h-26.613a4.99 4.99 0 0 0 0 9.98h26.613a4.99 4.99 0 0 0 0-9.98z"/></svg>
Ok, so I just tried it too (you should use the second way) and it’s come up like this, does this look correct to you?
https://paul-testing-4.bubbleapps.io/version-test/star_rating?debug_mode=true
Can you send me a screenshot of the settings that you have? I’ll help you get it working. Hopefully I can use the same settings as what you have to see if anything is interfering with it, then fix.
Paul
It’s got something to do with the value in the Rating field.
I put all the same values in and it worked, but the moment I put in a condition like the one that you have, nothing displays! Just as a test, clear that field and refresh the page to see if it comes to life again. I have noticed those parenthesis are in the color white, did you manually type those in? because with Bubble’s “Expression parentheses” option switched on in your settings, they should be orange.
If you put that entire Rating condition into a text element, what is the value that it is producing?
I think I got it…
I set mine up like this
The number isn’t really important here, it’s the condition and I think what’s happening is that the star rating element is initializing before bubble has calculated that value. When I take that value and enter it straight into the field, it works just fine.
The way I got around it was to set the star rating element to not visible to begin with, then have it made visible when that condition is greater than 0 (or is not empty), like this
@pork1977gm it seems that the star rating element is shrinking the width of the overall group it is in to the width of the star rating. I’m on new responsive. Any suggestions?
Hi @david49 I’ll take a look at it for you, I think when I initially put this together, the old responsiveness engine may have been more predominately in use so it could probably benefit from a few changes. I’ll take a look at it next week and go from there.
Could I ask, if you have a page I could look at it or a screenshot showing all your settings in the main element, would you mind PM’ing it over to me? If not, then no worries.
Paul
I like the plugin but have an issue. When I make the Star rating read-only, it does not update dynamically using the Rating field with a dynamic value. I have to set Read only to no for this to work. As a work around, I set a condition to make it read-only when hovered. The problem then is, that the stars still fill as the mouse is hovered over them, which messes with my UI design. Is it possible to do one or both of the following?:
Either of these will help my situation tremendously. Thanks.
Hi @christo1
I’ll get this issue fixed for you. Thanks for letting me know, appreciate that, will let you know when I’ve done it.
Paul
Thank you very much!
No probs. I’ve just pushed the update so hopefully you should be able to set it now in the same way as if it was not read only. Let us know if there’s anything else weird going on in read-only mode that you find and I’ll fix it up.
Regards,
Paul
