I'm trying to center the lightning select and other form elements vertically; how would i do that? would i just have to use an html select and not lightning?

enter image description here enter image description here

    <div class="slds-p-right_medium slds-p-vertical_xxx-small" >
        <lightning:select aura:id="selectField" name="selectField" label="" 
                          onchange="{!c.fieldSelected}" >
            <aura:iteration items="{!v.fieldWrappers}" var="fieldWrapper">
                <option value="{!fieldWrapper.fieldAPIname}" text="{!fieldWrapper.fieldLabel}"></option>
  • What do you mean align with other elements? I don't see any problem in your capture. – Martin Lezer Apr 25 '18 at 15:48
  • @Shuaib Ahmed, I would suggest you review basic CSS styling tutorials and the SLDS documentation for a better understanding of what you seem to be attempting to do since this is pretty basic CSS stuff, not necessarily Salesforce related. – glls Apr 25 '18 at 15:51
  • I understand how to style basic CSS elements, but the problem is the lightning select wraps the select into a form element that does not vertically center the select.. @martin , there's more elements in that row that are vertically centered i'll show in edit - thanks for your help! – Shuaib Ahmed Apr 25 '18 at 16:03
  • in that case, best include how and what you have tried so far to center your elements, as is, we dont know what you have tried. – glls Apr 25 '18 at 16:14

I think that can be solved by adding the variant.

<lightning:select aura:id="selectField" name="selectField" label="" variant="label-hidden" onchange="{!c.fieldSelected}" >

The space you see on the top is for the label which is kept as blank. LINK

| improve this answer | |

You might need to make use of the STYLE file of the lightning component bundle to overwrite any standard SLDS styles. You need to find the correct CSS tag by Inspecting Element on any web browser and apply you new styles in the STYLE file.

Salesforce Developer Blog reference: Styling with CSS in the Component Bundle

CSS in Components

| improve this answer | |
  • 3
    That's rarely ever needed (e.g. see other answer on this question), but this information is generally useful, as long as you understand it should only be a last resort. – sfdcfox Apr 26 '18 at 2:35
  • Yes, this is something we should be considering as a last option. Thanks @sfdcfox for providing your valuable feedback, this makes me feel privileged. :) – Arnold Jr. Apr 26 '18 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.