Checkbox render in Service Portal form widget

[guillaume92]

Hey guys,

I got a little issue with the OOTB render of the checkbox variables in SP form widget.

Whereas in Service Catalog view (when you click the "Try it" button on the item) we got checkbox rendered with big tick box, in SP they are rendered with small and grey one.

Is there a way to have to the big tick box in SP too ? Don't find anything for now 😕

Thank you for your answers 🙂

Guillaume

[Joel Millwood2]

Hi guillaume92,

You can do this but it will require the use of CSS.

To change just the size of checkboxes but leave the styling the same you can navigate to the page in question in the Page Designer: Service Portal > Service Portal Configuration > Designer > Form Page then click on the Page Properties button in the top right hand corner of the screen and add some Page Specific CSS like below:

input[type='checkbox'] {
    width: 2rem;
    height: 2rem;
}

[guillaume92]

Hi Joel 🙂

Thks for your answer, i'll post back as soon as i tested it 😄

Guillaume

[guillaume92]

Hi again Joel 🙂

This CSS just increase the size of the tick box, logic you'll tell me ^^

Let me show you how it looks in SP form widget :

And this is how I was expecting it :

Any ideas ?

Guillaume

[Joel Millwood2]

My apologies Guillaume,

I thought your only requirement was to make it larger. If you want it to look exactly the same as the Service Catalog then you will have to apply the same custom CSS that is used in the CMS view to your checkbox CSS above. You can find out what CSS is applied by right clicking next to a checkbox on a Catalog Item in the Service Catalog and selecting Inpsect in your web browser, from there you can find the checkbox element on the page and view what CSS is being applied to it. There are also many checkbox css generators and guides online that you may use if you want a different look and feel for your checkboxes.

If you want all of your checkboxes to look the same universally within the Service Portal then you are best off using a Portal Theme. See the following Product Documentation for further information: Create a portal theme.