1

I would like to use the lightning-file-upload LWC component. But, there is a label on the component which I do not want to use and which seems to mess up the layout. Here is a screenshot where the component is misaligned. This screenshot uses the standard label.

lightning-file-upload WITH label

Here is a screenshot where the label is empty

lightning-file-upload WITHOUT label

Here is inspecting the component. The label can be clearly seen.

Inspection of component WITH label span

Here is inspecting the component after REMOVING the labels span node. As can be seen the component now aligns as expected!

enter image description here

How do I go about either completely removing the label node or updating the CSS styling so that it doesn't create problems?

Improve this question
1
  • 1
    Try to give padding bottom to lightning upload button
    – Sahil Malhotra
    Dec 16, 2020 at 17:39

1 Answer 1

Reset to default
2

You can't. SLDS file upload is designed to always have a label, and LWC doesn't allow manipulation of elements inside a component via CSS or direct DOM manipulation. It would be better to add a label to the dropdown, instead. It's the dropdown that's in violation of SLDS guidelines, not the file selector.

Improve this answer
1
  • Thanks @sfdcfox. I was not thinking about this correctly as you say. I added a label to the drop down which solved the alignment issue.
    – Tom Ansley
    Dec 16, 2020 at 22:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .