Skip to main content

Notifications

Announcements

No record found.

Customer experience | Sales, Customer Insights,...
Suggested answer

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

Posted on by 459

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?

multiSelectoption.GIF

thank you so much,

  • Iva Kanova Profile Picture
    Iva Kanova 5 on at
    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 Profile Picture
    cloflyMao 25,198 on at
    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;

    tILLbOEdIv.png

    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.

    pUnvMdO5C8.png

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,269 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,198 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans