1

when I use :

<aura:application extends="force:slds" >
    <div>
        <lightning:input type="text" label="myLabel" name="withLabel" value="withLabel" />
    </div>
</aura:application>

The input element takes the whole width of the parent element (and that's excellent):

enter image description here

But when I use the label-hidden option:

<aura:application extends="force:slds" >
    <div>
        <lightning:input type="text" variant="label-hidden" label="noLabel" name="noLabel" value="noLabel" />
    </div>
</aura:application>

The input element takes only part of the parent element (and that is my problem):

enter image description here

I tried to play with css to fix that, but I couldn't find the right solution.

QUESTIONS

  1. Why is the component not taking 100% width when the label is hidden?
  2. Is there a better way to define the lightning:input component so this behavior will be fixed?
  3. If not - I need a good css solution to this problem.

UPDATE - added css rules that did not work

.THIS .lightningInput {
    display: flex;
}
  • Mind sharing what css rules you have tried along with scope? – glls Apr 30 '18 at 11:45
  • @glls question updated – Itai Shmida Apr 30 '18 at 12:39
  • what about the parent, could you include the parent node for reference purposes? – glls Apr 30 '18 at 12:53
  • @glls - added the whole code – Itai Shmida Apr 30 '18 at 12:57
  • Check out the Summer '18 release notes about an important change as this might have been addressed by the system no longer applying the slds-form_inline styling. To maintain hidden labels without the label still taking up space on the page, see my answer here salesforce.stackexchange.com/a/221202/987 – Doug Ayers Jun 11 '18 at 20:13
1

1- the SLDS styling changes the form element scoping when using the variant label-hidden.

2.- you can specify the width of your element in your styling yourself.

3.- you can add a class to your lightning:input component, and use child selector in order to expand the input element to 100% width:

component.cmp

<lightning:input class="child"..../>

component.css

.THIS .child>.slds-form-element__control {
    width:100%;
}
  • Thanks @glls - I have tried your solution, problem is, when I set a width like that suddenly the hidden label also takes it's height. As I see it - this is a bug with the variant="label-hidden" attribute, and the easiest way is not to use this attribute and hide the label with css with display: none – Itai Shmida May 1 '18 at 14:54
  • If you scope your css properly you can fix the height issue, about it being a bug, have you contacted support? – glls May 1 '18 at 15:43
  • I do not have access to this kind of support. It looks like a bug to me, don't you think so? – Itai Shmida May 1 '18 at 16:12
  • I am marking this answer as the accepted answer, although my better solution was to not use variant="label-hidden", and hide the label with css – Itai Shmida May 3 '18 at 9:07
0

If you want to remove the label completely, you can put the display to none for that label by accessing .slds-form-element__label class.

App Markup

<aura:application extends="force:slds" >
    <div>
        <lightning:input type="text" label="MyLabel1" name="withoutLabel" value="withoutLabel" class="nolabel" />
        <lightning:input type="text" label="MyLabel2" name="withLabel" value="withLabel" />
    </div>
</aura:application>

CSS

.THIS .nolabel .slds-form-element__label{
    display: none; 
    visibility: hidden;
}

Screenshot

enter image description here

Note: This is not recommended as you are using the framework level CSS and likely to be fragile.

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.