You need to sign in to do that
Don't have an account?
sumitha
Star Rating in Visual force page is not displayed in Firefox browser
Hi All,
Reference: https://codepen.io/rogie/pen/GIfqc
This Code is working perfectly in Google Chrome but it is not working in Firefox.
Thanks & Regards,
Sumitha P
Reference: https://codepen.io/rogie/pen/GIfqc
This Code is working perfectly in Google Chrome but it is not working in Firefox.
<apex:page standardcontroller="Account" sidebar="false" action="{!showRate}" showheader="false" docType="html-5.0" lightningStylesheets="true"> <apex:form > <apex:slds /> <style> .star-rating fieldset { font-size:0; white-space:nowrap; display:inline-block; width:250px; height:50px; overflow:hidden; position:relative; background: url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#DDDDDD" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>'); background-size: contain; } .star-rating input { opacity: 0; display:inline-block; width: 100%; height: 100%; margin:0; padding:0; z-index: 2; position: relative; } .star-rating input:hover + label, .star-rating input:checked + label { opacity:1; } .star-rating label { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20%; z-index: 4; background: url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#FFDF88" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>'); background-size: contain; } .star-rating td ~ td label { width: 20%; z-index: 8; } .star-rating td ~ td ~ td label { width: 30%; z-index: 7; } .star-rating td ~ td ~ td ~ td label { width: 40%; z-index: 6; } .star-rating td ~ td ~ td ~ td ~ td label { width: 50%; z-index: 5; } .star-rating td ~ td ~ td ~ td ~ td ~ td label { width: 60%; z-index: 4; } .star-rating td ~ td ~ td ~ td ~ td ~ td ~ td label { z-index: 3; width: 70%; } .star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label { z-index: 2; width: 80%; } .star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label { z-index: 1; width: 90%; } .star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label { z-index: 0; width: 100%; } .font { font-size: 19px; } </style> <apex:selectRadio value="{!fr.RatingScore__c}" layout="lineDirection"> <apex:actionSupport event="onclick" reRender="form"/> <apex:selectOption itemValue="0.5"></apex:selectOption> <apex:selectOption itemValue="1"></apex:selectOption> <apex:selectOption itemValue="1.5"></apex:selectOption> <apex:selectOption itemValue="2"></apex:selectOption> <apex:selectOption itemValue="2.5"></apex:selectOption> <apex:selectOption itemValue="3"></apex:selectOption> <apex:selectOption itemValue="3.5"></apex:selectOption> <apex:selectOption itemValue="4"></apex:selectOption> <apex:selectOption itemValue="4.5"></apex:selectOption> <apex:selectOption itemValue="5"></apex:selectOption> </apex:selectRadio> </apex:form> </apex:page>Please Advice,
Thanks & Regards,
Sumitha P
Even after update also the Star rating is not working on my end.
or Can you suggest any possible link with same functionality.
Please advice,
Thanks
Sumitha P
the issue is on user-adgent= safari or all IOS (Apple).
I find some forums on that but the star rating works only on double click !
if someone find the solutino please share !!!
_ Onclick event via Action Support not working in Safari (https://developer.salesforce.com/forums/?id=9062I000000BnDwQAK)
_ click-event-on-option-not-working-in-safari (https://stackoverflow.com/questions/52470432/click-event-on-option-not-working-in-safari)
_ /jquery-click-event-not-being-triggered-in-safari?rq=4 (https://stackoverflow.com/questions/472259/jquery-click-event-not-being-triggered-in-safari?rq=4)
_ /two-consecutive-click-events-not-triggering-the-change-event-on-safari-browsers (https://stackoverflow.com/questions/74170021/two-consecutive-click-events-not-triggering-the-change-event-on-safari-browsers)
_ /jquery-click-issue-on-safari-but-not-chrome?rq=3 (https://stackoverflow.com/questions/7678337/jquery-click-issue-on-safari-but-not-chrome?rq=3)
_ /click-event-in-safari-different-than-actual-click (https://stackoverflow.com/questions/13038404/click-event-in-safari-different-than-actual-click)
_ have-to-tap-twice-to-fire-event-link-with-ios?rq=3 (https://stackoverflow.com/questions/27050566/have-to-tap-twice-to-fire-event-link-with-ios?rq=3)
_ /why-when-do-i-have-to-tap-twice-to-trigger-click-on-ios (https://stackoverflow.com/questions/17710893/why-when-do-i-have-to-tap-twice-to-trigger-click-on-ios)
_ form-submit-and-onclick-behaviour-of-safari-desktop (https://stackoverflow.com/questions/76285222/form-submit-and-onclick-behaviour-of-safari-desktop)
_ onclick-event-in-select-html-not-working-in-safari (https://stackoverflow.com/questions/1769374/onclick-event-in-select-html-not-working-in-safari?noredirect=1&lq=1)
Guys I spend a lot of time ! please heeelp
Samuel