I have a lightning component that includes a grid containing rows of lightning:input components. Because they are rows only the first row needs labels and all fields need to be the same width to keep it neat.

The component looks like this

<aura:component >
    <aura:attribute name="hasHeader" type="String" required="true" default="base" />
    <aura:attribute name="byMetre" type="Boolean" required="true" default="false" />
    <aura:attribute name="Coverage" type="Decimal" required="true" default="1" />
    <aura:attribute name="prodName" type="String" required="true"  default=""/>
    <aura:attribute name="Description" type="String" required="true" default=""/>
    <aura:attribute name="Qty" type="Decimal" required="true" default="0" />
    <aura:attribute name="Actual" type="String" required="true" default="0" />
    <aura:attribute name="Cost" type="Decimal" required="true" default="0" />
    <aura:attribute name="Margin" type="Decimal" required="true" default="0" />

    <div class="slds-container_fluid" aura:id="lineItem">
        <div class="slds-grid slds-grid_align-spread">

            <div class="slds-col slds-size_2-of-12">
                <lightning:input aura:id="Qty" class="slds-size_1-of-1" type="number" label="Quantity" variant="{!v.hasHeader}" name="qty" value="{!v.Qty}" step="0.01"/>
            <div class="slds-col slds-size_2-of-12">
                <aura:renderIf isTrue="{!v.byMetre}">
                    <ui:outputText value="{!v.Actual}" />
            <div class="slds-col slds-size_3-of-12">
                <lightning:input aura:id="prod" class="slds-size_1-of-1" label="Product" variant="{!v.hasHeader}" name="prod" value="{!v.prodName}"/>
            <div class="slds-col slds-size_3-of-12">
                <lightning:input aura:id="desc" class="slds-size_1-of-1" label="Description" variant="{!v.hasHeader}" name="desc" value="{!v.Description}"/>
            <div class="slds-col slds-size_2-of-12">
                <lightning:input aura:id="cost" class="slds-size_1-of-1" type="number" label="Cost" variant="{!v.hasHeader}" name="cost" value="{!v.Cost}" formatter="currency" step="0.01"/>

This component is created from data received from the server and inserted to a parent component inside a slds-grid. The first component to be inserted has 'hasHeader' set to 'base', all following have 'hasHeader' set to 'label-hidden'.

The problem is that all of the inputs with variant="label-hidden" appear to ignore the class="slds-size_1-of-1" and have size determined by the length of the value.

I have read that the label can be hidden by css but i would rather not do that.

Is it possible to use variant="label-hidden" on a lightning:input field and still have it fill the column using class="slds-size_1-of-1"?

  • For now I have used css to hide the labels and new component with the same layout (injected as the first row) to use as a header. Hopeful that someone will help out as time goes by.. – Daniel Collier Aug 27 '17 at 2:54

Try defining % width to each of these style classes in CSS file of the component like this

.THIS .slds-size-1-of-12{ width:8% }

.THIS .slds-size-2-of-12{ width:8% }

Sometimes it shrinks the width and increases exponentially if we do not specify.

Please let me know if this helps

  • Thanks @Abhishek but I'm looking for a solution that doesn't include custom css. At this stage I'm assuming I am 'doing it wrong' and there is a way to make it work by changing something in the markup. – Daniel Collier Aug 26 '17 at 6:08
  • If you could give us the screenshot of how it looks and we will be able to decode more in the code – Abhishek AVK Aug 27 '17 at 7:49

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.