Skip to content
OverviewSolutions
12
Comments
2
EcePJD
@EcePJD

All comments

  • EcePJD•200
    @EcePJDPosted over 1 year ago

    First of all, you can update your solution in the 'Design Comparison' by clicking the 'Generate New Screenshot' (Red - Pinkish button). Second, I didn't see the horizontal scroll bar on your solution (you might've fixed it already).

    Child elements overflow because the overall width / height ( or both) they occupy is more than the width / height of the container resulting to a scroll bar. Based on my experience, even though you set the width and height of these child elements to equal or less than the container's size by using parent-dependent units ( e.g.percentage '%') and the parent element does not have a specified size, it will not apply. You must specify your parent element's size first (e.g. px).

    If incase my analysist about child elements are wrong and you still did not figure how the scroll bar is appearing, you can hide it by setting the parent's overflow attribute to 'hidden'.

    Reference: (overflow)https://www.w3schools.com/css/css_overflow.asp

    Marked as helpful
    0
  • eve•230
    @Eve-WangariSubmitted over 1 year ago

    Is there a way to prevent the submission if a user does not click on a number? For now, I just let the default rating to be one.

    JavaScript rating component

    1
    EcePJD•200
    @EcePJDPosted over 1 year ago

    You can disable the button using the 'disabled' attribute

    You can use this js code to add disabled attribute: document.getElementById("submitButtonId").disabled = true;

    And add an event listener function that detects the selection change of the selected option value (the rating 1 - 5). Inside that function add a condition that if the value is higher than 0 ( or any condition you know that is better that what i say :) ) it sets the disabled attribute to false: document.getElementById("submitButtonId").disabled = false;

    Reference:

    (disabled attribute) https://www.w3schools.com/tags/att_disabled.asp

    (onchange event listener)https://www.w3schools.com/jsref/event_onchange.asp

    Marked as helpful
    0