Kentico 12 MVC Form Components

Lex Stewther asked on November 14, 2019 21:22

How do I customize the system form components with styles? I am trying to get a custom style for the radio buttons applied. However, I can't seem to find it anywhere when building forms. I know I can make a custom component, however it seems like overkill for just adding custom styles. Is there anyway to override the system view?

form components custom

Correct Answer

Mike Wills answered on November 15, 2019 01:28

Hi Lex,

Can you use an attribute selector to apply CSS to the radio button, and an adjacent sibling selector to apply CSS to its label -- something like this?

input[type="radio"] + label {
    text-decoration: underline;
}

Also, if you want a wrapper CSS class around your form, you could set the HTML that wraps a form widget using the FormWidgetRenderingConfiguration.FormWrapperConfiguration property.

https://docs.kentico.com/k12/developing-websites/form-builder-development/customizing-the-form-widget

Mike

0 votesVote for this answer Unmark Correct answer

Recent Answers

Lex Stewther answered on November 15, 2019 16:57

Thanks, I'll look into that. I may just create my own form component. The problem is the Kentico generated controls aren't compliant with Bootstrap 4 layout. More specifically, the span tag doesn't have the "form-check" class and the input and label need to have the form-check-input and form-check-label classes.

0 votesVote for this answer Mark as a Correct answer

Mike Wills answered on November 15, 2019 17:25

Thanks Lex. It might be easier to create some custom CSS for those controls instead of trying to use Bootstrap. I'd like to hear how it goes, though.

Mike

0 votesVote for this answer Mark as a Correct answer