Fieldset and Legend Not Display Properly In Lightning Component -fix/workaround
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 :
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 :
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”
Thanks for provide solution