Choice Column suddenly changed styling

Forms
1

Hi.
My already saved and working form suddenly changed choice column pulldown and choice styling.
I used to have round corners and some had no styling, but today they all have background (color as their pill in the SharePoint list) and rectangular look. My styling is still in place, with border radius of 10px but not applied anymore. I presume something must have changed on SharePoint side? Just wanted to check if I'm the only one or if it's a global thing.

image
image

This worked until today (or recently)

image
image1401×160 14.9 KB

Many thanks in advance

2

Hi @HypnoToad,

We've updated the Choice fields to pull option colors from SharePoint.
To revert the changes for your form, use this code:

fd.field('Choice').ready(() => {
    var template = "<span style ='";
    template += "border: 1px solid;";
    template += "border-color: #6c6cff !important;";
    template += "border-radius: 10px !important;";
    template += "'>#: data #</span>";

    fd.field('Choice').widgetOptions = {template: template};
});
3

Hi. Thank you for your quick answer.
I used the code you provided but still can't get it to work.
I changed the 'Choice' to my SharePoint column and placed the code in spRendered section.
I can't see any difference, still displaying option colors.

Browser console shows no errors...

Anything else I should do? Thanks again.

4

Hi @HypnoToad,

We'll add full-fledged API for editing colors via JS next week. For now, you can try replacing #6c6cff with royalblue in the code.

5

Hi.
Thanks for your reply. This fixed my issue somewhat, but in other places it still doesn't do anything (choice checkboxes). My pulldowns now have background behind each value and all my forms are all over the place.

I can't believe you guys would release such a half-baked feature and make it default. I have many forms that now look like crap and I have users messaging me and asking about it. I can't even see this in any changelog or release info on your support pages. I keep telling people that I'll be able to fix it next week, hopefully, but still don't know how much time it's going to cost me. I appreciate your help but the code doesn't do much and with choice checkboxes it throws the whole thing out of whack.
Especially since some of the choice options seem to have css as fd-choice_input and some fd-choice_icon. I'm gonna have to leave it like this and hope you will fix this soon...
Thanks anyway, I appreciate you trying to help me...

6

Hi @HypnoToad,

We've rolled out an update, please replace the temporary code with

fd.field('DropDown1').optionsColors = {}

We are trying to minimize the impact of major updates, but significant feature releases and control updates can sometimes be noticeable. We apologize for the mishap.

Please let me know if you have any other problems.

7

Hi Ilia.
This seems to have worked.
Thanks. Sorry for being a bit harsh, I got people all over me and got a bit frustrated. No matter what happens, I always say you guys have top notch support and you have demonstrated that yet again.
Good luck with the updates and thanks again.

8

Hi Ilia, I'm experiencing something similar. Until recently the form showed the choices in the same format as SharePoint with rounded corners. But now it is square corners and it all looks very blocky. How would I get the original SharePoint format with rounded corners back?

9

Hi @peter.harrison,

Try this CSS snippet:

.fd-form .fd-choice__label{
    border-radius: 20px;
}

Let me know if this works.

1 Like
10

Yes, thanks Ilia, that has worked perfectly.