function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jérôme GlotonJérôme Gloton 

Styling UI:input

Hi everyone,

I'm trying to style my first form in a Lightning Component and I'm having problems with the ui:input. For exemple: with the ui:inputDate the label has a line break before the input when the ui:inputSelect has no line break... could someone explain this to me and how I can put a line break for every type of ui:input.
I'd rather use the ui:input instead of the HTML input because of the <input type="date" /> that doesn't work properly on every browsers...

I would be happy to share your knowledge on the subject,
Thanks in advance and sorry if this question has already been asked
Best Answer chosen by Jérôme Gloton
Carlos F HernandezCarlos F Hernandez
For each ui:input component you can use labelClass and Class attribute to be used for styling.
In case of ui:inputSelect component you can do the following:
  
<ui:inputSelect ... class="inputSel">

and then change the style in your component style file: 
.THIS .inputSel{
    display:block;
}
If you need to change the HTML rendered from these components, you can do DOM Modifications using Component Renderer files.
 

All Answers

James LoghryJames Loghry
Yes, ui:input adds its own styling. If it doesn't work for you, then simply use the input equivalent instead.
James LoghryJames Loghry
An alternative is to keep the ui:input, but write your own rerender method that strips out any css classes you don't want.
Carlos F HernandezCarlos F Hernandez
For each ui:input component you can use labelClass and Class attribute to be used for styling.
In case of ui:inputSelect component you can do the following:
  
<ui:inputSelect ... class="inputSel">

and then change the style in your component style file: 
.THIS .inputSel{
    display:block;
}
If you need to change the HTML rendered from these components, you can do DOM Modifications using Component Renderer files.
 
This was selected as the best answer
Jérôme GlotonJérôme Gloton
Thank you Carlos and James!!!

I've managed to do what I want thanks to your answers!