Heya! I am playing around with Crayons to match our product UI for an app which I am building and I tried adding an id for each of the fw-select option, but it doesn’t seem to get reflected when the HTML gets rendered. I am also unable to add a class name as well for the same.
Code Snippet:
let multiSelect = `<fw-select id = 'options' multiple>`;
for (let i = 0; i < options.length; i++){
if (['requester', 'agent'].includes(options[i].name)){
continue;
}
if (!(options[i].default_field)){
options[i].name += '_cf';
}
multiSelect += `<fw-select-option class="option${i}" id="${i}" value="${options[i].name}"> ${options[i].label} </fw-select-option>`
}
$('.selectOptions').append(multiSelect);
And also there isn’t any method to get the text value of that particular option, so i’ve used a work-around by adding it to the value using the delimiter(’|’). So if there is any way to access the text, do let me know about that as well.
First of all welcome to the Freshworks Developer Community!
Unfortunately, due to the nature of web components and also partially due to design, we don’t allow customizing CSS and the components strictly follow the Freshworks Design System.
However, we are ready to open up necessary CSS properties via CSS variables as and when needed.
If you could share the customizations that are needed, we can see what properties can be opened up.
Hey, I don’t want to edit the css properties of the dropdown. I would just like to be able to add id and class to the fw-select-option as I want to trigger changes to that particular dropdown option based on certain conditions. (For example, having two dropdown boxes, and disabling the option, which has been selected in the first dropdown box, in the second dropdown box.)
Functionality like this: As you can see that I have selected status in the first dropdown, it has been disabled in the second dropdown. This can be achieved if i can add classes and id to the fw-select-option.
