0

I want to allign create button at the same level of input field i.e exact right side of the input field, in the same line.

In the below code, it is coming at below level of the field

<div class="slds-grid slds-grid--wrap">
<div class="slds-size--1-of-12"></div>
<div class="slds-size--10-of-12 slds-container--medium slds-container--left">
    <br></br>
    <div class="slds-form--horizontal">
        <div class="slds-form-element">
            <label class="slds-form-element__label">Enter Expense Value</label>
            <div class="slds-form-element__control">
                <ui:inputNumber class="slds-input"/>
            </div>
        </div> 
         <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/>                 
    </div> 
</div>     
<div class="slds-size--1-of-12"></div>
    </div>
  • Why not use lightning:input? – sfdcfox Oct 8 '18 at 19:13
  • lightning:input instead of <lightning:button ? will that help? – user2542953 Oct 8 '18 at 19:16
  • I meant instead of the label/ui:inputNumber all that other stuff. Your code could be so much neater. Also, -- slds elements are deprecated and may not work in Winter '19 or in the future. Change them to _, such as slds-form_horizontal and slds-size_1-of-12. – sfdcfox Oct 8 '18 at 19:22
1

Why not use lightning:layout like so:

<lightning:layout multipleRows="true" verticalAlign="end">
        <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="1" largeDeviceSize="1" padding="around-small"/>
        <lightning:layoutItem size="12" smallDeviceSize="10" mediumDeviceSize="8" largeDeviceSize="8" padding="around-small">
            <div class="slds-form-element">
                    <label class="slds-form-element__label">Enter Expense Value</label>
                    <div class="slds-form-element__control">
                        <ui:inputNumber class="slds-input"/>
                    </div>
                </div> 
        </lightning:layoutItem>
        <lightning:layoutItem size="12" smallDeviceSize="2" mediumDeviceSize="2" largeDeviceSize="2" padding="around-small">
            <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/> 
        </lightning:layoutItem>
        <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="1" largeDeviceSize="1" padding="around-small"/>
    </lightning:layout>

Pay attention to verticalAlign="end" which pushes the button to the bottom and aligns with the input box, otherwise it will try to align with your label.

But, if you want to stick to your original design, here a way to do it:

<div class="slds-grid slds-grid--wrap">
        <div class="slds-size_1-of-12"></div>
        <div class="slds-size_10-of-12">
            <fieldset class="slds-form-element slds-form_compound">
                <div class="slds-form-element__control">
                    <div class="slds-form-element__group">
                        <div class="slds-form-element__row">
                            <div class="slds-form-element slds-size_1-of-2">
                                <label class="slds-form-element__label">Enter Expense Value</label>
                                <div class="slds-form-element__control">
                                    <ui:inputNumber class="slds-input"/>
                                </div>
                            </div>
                            <div class="slds-form-element slds-size_1-of-2">
                                <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/> 
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>   
        </div>
        <div class="slds-size_1-of-12"></div>
    </div>

You can refer to this for further clues.

  • can't be my code altered to fit the criteria.. is there any limitation to slds-size.. – user2542953 Oct 8 '18 at 19:21
  • I updated the answer. – Lightning Evangelist Oct 8 '18 at 19:34
0

Try wrapping both lines in a span tag

<div class="slds-grid slds-grid--wrap">
<div class="slds-size--1-of-12"></div>
<div class="slds-size--10-of-12 slds-container--medium slds-container--left">
    <br></br>
    <div class="slds-form--horizontal">
<span>
        <div class="slds-form-element">
            <label class="slds-form-element__label">Enter Expense Value</label>
            <div class="slds-form-element__control">
                <ui:inputNumber class="slds-input"/>
            </div>
        </div> 
</span>
<span>
         <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/>
</span>


    </div> 
</div>     
<div class="slds-size--1-of-12"></div>
    </div>

if that doesnt work try using slds-grid and slds-col like the example below

div class="slds-grid slds-gutters">
  <div class="slds-col">
    <div>enter-expense</div>
  </div>
  <div class="slds-col">
    <lightning:button>2</lightning:button>
  </div>
</div>

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.