10

I am trying to include lightning:select component in a table row. But I don't want to show the label for select input. I am using variant="label-hidden", which hides the label, but the space for the label is still occupied. As a result, the select input moves down and is not aligned with rest of the column values in a row.

I noticed this issue as soon as our org was updated to Summer 18. Please let me know if there is a fix for this other than overriding the CSS for the label.

Improve this question

4 Answers 4

Reset to default
21

The label no longer being hidden is impacted by the Summer '18 change where many base lightning components no longer automatically include the slds-form_inline or slds-form--inline CSS class.

Per the release notes:

The slds-form_inline (formerly slds-form--inline) style was removed. When applied, the style made the element’s width unchangeable.

Where: This change affects Lightning components that support the label-hidden variant: lightning:input, lightning:combobox, lightning:dualListbox, lightning:radioGroup, lightning:select, and lightning:textarea. The style is no longer applied when you use the label-hidden variant, but you shouldn’t notice a difference in the rendering of the components in most cases.

Why: The slds-form_inline style was mistakenly applied by the label-hidden variant.

I'm not sure what scenarios the statement "you shouldn’t notice a difference in the rendering of the components in most cases." refers to, but when using variant: label-hidden this change has visible differences compared to earlier versions of Salesforce.

Workarounds

Option 1. (recommended) Add custom component styling

I recommend this option as you avoid any of the negative side effects for why Salesforce removed usage of the slds-form_line class but you get the benefit of hiding the label, which is the desired effect.

Assign a custom class to your input component (I chose to name my class 'label-hidden' after the variant) and then add styling for it in your component's style resource.

YourComponent.cmp

<lightning:select
    label="Select Account"
    variant="label-hidden"
    class="label-hidden"
    value="{!v.selectedAccountId}">
    ...
</lightning:select>

YourComponent.css

.THIS .label-hidden > label {
    display: none;
}

Option 2. Add back the class slds-form_line to your component

This approach tries to reproduce the original behavior pre Summer '18, but you maintain any of the negative reasons why Salesforce decided to remove its usage. However, you don't have to create a custom style resource for your component.

YourComponent.cmp

<lightning:select
    label="Select Account"
    variant="label-hidden"
    class="slds-form_inline"
    value="{!v.selectedAccountId}">
    ...
</lightning:select>
Improve this answer
2
  • Thank you Doug. We have decided to move forward with Option 2 and it seems to be working fine.
    – Ashish Narkhede
    Commented Jun 29, 2018 at 6:04
  • We still observe problem with Lightning:select and second option doesn't work for us, only the first option work.
    – Patlatus
    Commented Dec 10, 2018 at 11:05
9

Update: As of Winter '19, using Lightning:input variant="label-hidden" works again as the author had hoped (there is no space occupied by the would-be label).

Sample markup:

<div class="slds-grid">
    <div class="slds-col slds-text-heading_medium slds-has-flexi-truncate">Page Title</div>
    <lightning:input class="slds-col slds-float_right slds-has-flexi-truncate" type="search" variant="label-hidden" name="search" placeholder="Search"/>
</div>

enter image description here

Improve this answer
1
  • 6
    works for lightning:input but not for lightning:select
    – Patlatus
    Commented Nov 30, 2018 at 13:26
0

we had a similar issue with input as well. The css definitions are improved in Summer'18. In our case replacing .slds-input.slds-is-disabled with .slds-input[disabled] fixed the problem. My suggestion would be to take a look at the CSS definition changes.

Improve this answer
0

I wanted a bold label and had to do all sorts to get the right style...

.THIS .label-hidden > label {
   display: none;
}

.THIS .addmargin {
   padding: 6px 0 0 0;
}

.THIS .thick {
   font-weight: bold;}
}

And the component:

<lightning:layoutItem size="6" padding="horizontal-small" > 
   <label class="thick " for="taskCatType">Type:</label>
   <lightning:select  aura:id="taskCatType" value="{!v.singleRec.CCMI__Type__c}"  class="label-hidden addmargin" onchange="{!c.onFieldChange}"  disabled="{!v.singleRec.CCMI__Status__c == 'Completed'}">
      <aura:iteration items="{!v.catPicklistOpts}" var="typeopt">
         <option text="{!typeopt.label}"  value = "{!typeopt.value}" ></option>
      </aura:iteration>
    </lightning:select>
 </lightning:layoutItem>
Improve this answer

You must log in to answer this question.

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