cssbootstrap-4formstack

Bootstrap and Formstack CSS clash - radio buttons only partly visible

The CSS of Bootstrap (4.1.3) and Formstack are clashing when embedding a form into a website. The radio buttons are only partly visible. The problem is in the "label" class ("fsOptionLabel"). Changing the line height does help a little, but then the radio button doesn't align properly with the text. My CSS knowledge is limited, so sorry my apologies for this stupid question. I just can't figure it out... Any suggestions on how to fix this? It is a fieldset (role="group") with labels like this:

<label class="fsOptionLabel vertical" for="field78202961_1">
<input type="radio" id="field78202961_1" name="field78202961" 
value="Single" class="fsField fsRequired vertical" aria-
required="true">Single</label>

formstack form

Solution

  • The support from Formstack suggested the following workaround:

    .fsRowBody input[type="radio"], .fsRowBody input[type="checkbox"] {
top: 2px;
width: 25px;
height: 25px;
}