Customer experience | Sales, Customer Insights,...

apply css style to multiselect option set in marketing form in dynamics 365

(0) Share

Report

Posted on by SivaR

Hi
I want to use multi-select option set field on a landing page.
can I use a multi-select option set field with Marketing form?

i just tried to add a multi-select option set field in a marketing form. the option values were displayed as shown in the image. how I can add CSS style to the multi-select option set field to display the options with line break. (each option to be displayed in a separate line. can you provide me sample CSS style code to include in my marketing form to format the multi-select option set field?

thank you so much,

All responses (2)

Answers (0)

Iva Kanova 5 on at

Like (0)

Report

RE: apply css style to multiselect option set in marketing form in dynamics 365

Thank you! I was facing the same issue even though all the css looked correct. What finally made it stick on the pages was the !important declaration.
Suggested answer

cloflyMao 25,208 on at

Like (1)

Report
RE: apply css style to multiselect option set in marketing form in dynamics 365

Hi Siva,

Yes, we can add multi-select option to marketing form.

It seems that your CSS rule for your checkbox item layout is broken, you could open inspector(F12) to debug display layout and try to fix the issue.

E.g:

1. As expectation, each option shall be nested in a span element whose class name is "lp-checkboxListItem".(Include a checkbox and corresponding value)

There is a key css rule to make each of them with line break.

display: block;

2. However, if I disable the display: block; rule for lp-checkboxListItem span element,

then remove float:left rule for each of checkbox,

I will get same layout with issue as you encountered.

3. Suggestion:

I copied the CSS rules for normal layout, you could copy and paste CSS rules below to your marketing page or marketing form source code to test whether it could fix the layout.(in Style tag)

div[data-editorblocktype=Field-checkboxList] input, div[data-editorblocktype=Field-checkbox] input { width: auto; height: auto; margin-bottom: 3px; margin-right: 8px; float: left!important; } div[data-editorblocktype=Field-checkboxList] span.lp-checkboxListItem, div[data-editorblocktype=Field-radioButtons] span.lp-radioButton { /* This rule is needed to style all radio button fields. For product constraints each option is defined as input and label wrapped into a span*/ display: block!important; margin: 2px; }

!important declaration will override any other declarations.

Regards,

Clofly