Hi team
We are trying to change the button text color , we want to toggle the button text color , based on enable and disable
We want the button to be in red when disabled , and white when enabled
Please see the picture attached
If you see the picture, the enabled button text is in white , for the disabled one we would want to change it to red , we would want to toggle the button text color based on different states
could you help us out with this
Question
T11120
Visible to All Users
Hello Ravikiran,
Judging by your screenshot, I suppose you added another custom navigation button to the survey navigation bar. Now, you wish to conditionally change the button's color text depending on whether or not the button is enabled. Would you please clarify whether you've applied a custom theme to your survey? I cannot recall similar colors for navigation buttons in supported themes.
It would be extremely useful if you could share an example for research.
I look forward to your reply.
Thank you
For the record: in defaultV2 theme, you can specify the CSS
color
attribute for various states of the.sd-btn--action
class.As an example, the following CSS sets the yellow text color for enabled state and red for disabled:
.sd-btn--action:not(:disabled) { color: yellow; } .sd-btn--action:disabled { color: red; }
Please explore the source code here: sd-button.scs.
Hi Jane
Thank you for your reply
We have a Css file where we specify the styles and import it in the survey component
I have added the Css code provided above , unfortunately I do not see the changes reflecting
Sharing the code of Css file we have with you
As of now , the button text color is not changing , even after adding the following code
.sd-btn–action:not(:disabled) {
color: yellow;
} .sd-btn–action:disabled {
color: red;
}
The above code is not changing the button text color , I have attached the CSS file we have , please see the attachment
could you please help us with this
Hi Ravikiran,
Thank you for sharing your custom CSS. Would you please clarify which theme you apply to your surveys?
Hi jane
Thanks for the quick response
we are using defaultV2 theme
StylesManager.applyTheme('defaultV2')
Hello,
Thank you for the clarification. I've just tried your CSS and got the Yellow color correctly applied to the Complete button in enabled state:
Example.
You can right-click the Complete button and explore which classes got applied to it. Should you have any questions or require further assistance, we are here to help.