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?

  • Post your code on the question. – Jarvis Aug 20 '18 at 10:55
  • Is it custom modal or quick action standard one? – user1974566 Aug 20 '18 at 10:59
3

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

  • 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 '18 at 11:17
  • Please provide what you did try so far, It's hard to guess what's wrong without the code. – user1974566 Aug 20 '18 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.

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.