2

Here is the reproducible version of the problem I am facing:

ExampleComponent.cmp

<aura:component>
    <ltng:require styles="/resource/SLDS212/assets/styles/salesforce-lightning-design-system-ltng.css"/>

    <div class="MyCompany">

        <form class="slds-form--inline">

            <div class="slds-form-element">
                <label  class="slds-form-element__label" 
                        for="field-one">Field One</label>
                <div class="slds-form-element__control">
                    <input  id="field-one" 
                            class="slds-input" 
                            type="number" 
                            value="1"/>
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input    type="number" 
                                        name="Field-two" 
                                        label="Field Two" 
                                        value="2">
                    </lightning:input>
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input    type="number" 
                                        name="Field-three" 
                                        label="Field Three" 
                                        value="3">
                    </lightning:input>
                </div>
            </div>                  
        </form>
    </div>
</aura:component>

On page load:

enter image description here

when user changing value in Field two:

enter image description here

when user changing value in Field one:

enter image description here

How to get Field two behavior same as Field one without changing lightning:input to input

NOTE: Please note that this may look like plain styling issue and candidate for stackoverflow but I strongly feel it has something to do with lightning/slds :)

4

A possible solution would be to use SLDS styling:

<aura:component>
    <div class="slds-grid">             
        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3 ">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input type="number" label="Field One" value="1" />
                </div>
            </div>
        </div>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                   <lightning:input type="number" label="Field Two" value="2" />
                </div>
            </div>
        </div>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input type="number" label="Field Three" value="3" />
                </div>
            </div>
        </div>
    </div>
</aura:component>

Output:

enter image description here

Styling used:

  • slds-grid: used to have all 3 boxes on the same line. If removed, each lightning:input will be on a separate line, as shown in photo below:

Inputs on different lines

  • slds-col--padded: used to add a space between the components(input boxes)
  • slds-size--1-of-1: size of the input boxes
  • slds-medium-size--1-of-3: used to display three elements on a line

You may check out SLDS Sizing for the last two points.

Note: I have changed the first <input> to a <lightning:input>. You may play around with it.

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.