1

I have a button "Create New Opportunity". onclick of this button, a lightning modal popup opens with the set of around 16 input field tags to get the inputs from the user.I want this 16 input field tags to be displayed as 8 tags as one column and next 8 tags as another column.

I tried using and but it didn't work. Could anyone please let me know is there any other way to achieve this?

2
  • Post your code on the question.
    – Jarvis
    Aug 20, 2018 at 10:55
  • Is it custom modal or quick action standard one? Aug 20, 2018 at 10:59

2 Answers 2

6

I would need to have more information and code example what you want to do but from your brief description I got that you want to basically create two columns in lightning component.

You need to use slds grid system:

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
  <div class="slds-col slds-size_1-of-2">
    <lightning:input name="input1" label="Enter some text" />
  </div>
</div>

More resources and reference here: SLDS Grid Documentation

2
  • Yes. I want to create two columns inside lightning modal .I tried with <lightning layout> and <lightning:layoutitem> but this is not working.
    – Sindhuja
    Aug 20, 2018 at 11:17
  • Please provide what you did try so far, It's hard to guess what's wrong without the code. Aug 20, 2018 at 11:26
0
<div class="slds-grid slds-gutters">
        <div class="slds-col">
            <span>
                <div class="slds-form slds-form_stacked">
                    <!-- insert your field attributes here inside div class="slds-form-element" for those many fields you want to show in one column --> 
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="form-element-01">Form Label</label>
                        <div class="slds-form-element__control">
                            <input type="text" id="form-element-01" class="slds-input" placeholder="Placeholder Text" />
                        </div>
                    </div>
                </div>
            </span>
        </div>
        <div class="slds-col">
            <span>
                <div class="slds-form slds-form_stacked">
                    <!-- insert your field attributes here inside div class="slds-form-element" for those many fields you want to show in one column --> 
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="form-element-01">Form Label</label>
                        <div class="slds-form-element__control">
                            <input type="text" id="form-element-01" class="slds-input" placeholder="Placeholder Text" />
                        </div>
                    </div>
                </div>
            </span>
        </div>
    </div>

enter image description here

What you need is to insert your component(your field) inside div class="slds-form-element" .You can create more columns by adding:-

<div class="slds-col">
            <span>
            </span>
</div>

Hope it helps you. You can add more slds for better ui.

You must log in to answer this question.

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