Fieldset and Legend Not Display Properly In Lightning Component -fix/workaround

Lightning Component

Last night when i was working on one of my project, i was facing an issue with  <fieldset> and <legend>HTML tags in lightning component. i was using following code which was not showing fieldset and legend properly in lightning component:

<aura:component >
 <form>
    <fieldset>
	   <legend>Select your favorite color:</legend>
	     <lightning:input type="checkbox" label="Red" name="color1" value="1" />
	     <lightning:input type="checkbox" label="Blue" name="color2" value="2"/>
	     <lightning:input type="checkbox" label="Green" name="color3" value="3"/>
       </fieldset>
 </form>
</aura:component>

Output :

fieldset issue fix in lightning component
Fieldset border missing, legend also not align properly 🙁

 

The <fieldset> tag is used to group related elements in a form.

The <legend> tag defines a caption for the <fieldset> element.

Fix / Workaround :
  • Add custom CSS Class for fieldset and legend tags, and use custom CSS class on those tags :
<aura:component >
 <form>
    <fieldset class="myFieldset">
       <legend class="myLegend">Select your favorite color:</legend>
           <lightning:input type="checkbox" label="Red" name="color1" value="1"/>
           <lightning:input type="checkbox" label="Blue" name="color2" value="2"/>
           <lightning:input type="checkbox" label="Green" name="color3" value="3"/>
    </fieldset>
 </form>
</aura:component>

Component CSS tab :

.THIS .myFieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove;
    
}

.THIS .myLegend {
    display: block;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
}

Also Checkout : 3 Ways to Use CSS In Lightning Component.

Output :

fieldset issue fix in lightning component

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂

One thought on “Fieldset and Legend Not Display Properly In Lightning Component -fix/workaround

Leave a Reply