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:

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 :

Component CSS tab :

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 🙂

(Visited 1,280 times, 2 visits today)

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

Leave a Reply