function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JohnDuraiJohnDurai 

Two column layout section using LWC

Hi - I have created a LWC component for layout section as below, can someone suggest how this can be used as two column layout.
User-added image Here is my code:

<template>
    <div class={sectionClass}>
        <h3 class="slds-section__title">
            <button class="slds-button slds-section__title-action" onclick={handleClick}>
                <lightning-icon
                    icon-name="utility:switch"
                    class="slds-button__icon slds-button__icon_left slds-section__title-action-icon"
                    size="x-small">
                </lightning-icon>
                     <span class="slds-truncate" title={label}>Notes</span>
              </button>
        </h3>
        <div class="slds-section__content">
            <div class="slds-col slds-p-horizontal_medium">
                <lightning-layout>
                    <lightning-layout-item padding="around-small">
                        <div class="header-column">
                            <p class="field-title" title="Field 1">Address Notes</p>
                       </div>
                    </lightning-layout-item>
                    </lightning-layout>
                </div>
                <div class="slds-col slds-p-horizontal_medium">
                    <lightning-layout>
                        <lightning-layout-item padding="around-small">
                            <div class="header-column">
                                <p class="field-title" title="Field 2">Income Notes</p>
                           </div>
                        </lightning-layout-item>
                        </lightning-layout>
                    </div>
                    <div class="slds-col slds-p-horizontal_medium">
                        <lightning-layout>
                            <lightning-layout-item padding="around-small">
                                <div class="header-column">
                                    <p class="field-title" title="Field 3">Health Notes</p>
                               </div>
                            </lightning-layout-item>
                            </lightning-layout>
                        </div>
                        <div class="slds-col slds-p-horizontal_medium">
                            <lightning-layout>
                                <lightning-layout-item padding="around-small">
                                    <div class="header-column">
                                        <p class="field-title" title="Field 4">Expense Notes</p>
                                   </div>
                                </lightning-layout-item>
                                </lightning-layout>
                            </div>
        </div>
    </div>
</template>
Best Answer chosen by JohnDurai
CharuDuttCharuDutt
Hii John Durai 
i've Done Some Changes 
<lightning-layout multiple-rows="true">
            <lightning-layout-item class="slds-p-around_xx-small" size="12">
              <lightning-layout>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 1">Address Notes</h3></div>
                        
                        <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 3">Health Notes</h3></div>

                         <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                  </lightning-layout-item>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 2">Income Notes</h3></div>

                        <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 4">Expense Notes</h3></div>

                        <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                  </lightning-layout-item>
                
              </lightning-layout>
            </lightning-layout-item>
          </lightning-layout>

Please Mark It As Best Answer If It helps
Thank You!

All Answers

CharuDuttCharuDutt
Hii JohnDurai
Try Following Code 
<template>
    <lightning-card>
    <div class={sectionClass}>
        <h3 class="slds-section__title">
            <button class="slds-button slds-section__title-action" onclick={handleClick}>
                <lightning-icon
                    icon-name="utility:switch"
                    class="slds-button__icon slds-button__icon_left slds-section__title-action-icon"
                    size="x-small">
                </lightning-icon>
                     <span class="slds-truncate" title={label}>Notes</span>
              </button>
        </h3>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item class="slds-p-around_xx-small" size="12">
              <lightning-layout>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div>
                        <p class="field-title" title="Field 1">Address Notes</p>
                    </div>
                    <div>
                        <p class="field-title" title="Field 3">Health Notes</p>
                    </div>
                  </lightning-layout-item>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div>
                        <p class="field-title" title="Field 2">Income Notes</p>
                    </div>
                    <div>
                        <p class="field-title" title="Field 4">Expense Notes</p>
                    </div>
                  </lightning-layout-item>
                
              </lightning-layout>
            </lightning-layout-item>
          </lightning-layout>
    </div>
</lightning-card>
</template>
Please Mark It As Best Answer If It helps
Thank You!
JohnDuraiJohnDurai
Hi CharuDutt - Thanks for your it helps, right now my UI looks like below but i am expecting as bit similar to standard out of the box feature of page layout section.

User-added image

And also, I need to call another LWC component  inside my current component as below example. it would be great if you give some idea how to call and place the below another componet(notes) inside the layout component which i built above.

User-added image
CharuDuttCharuDutt
Hii Jhon Durai
Try The Below Code. 
<template>
    <lightning-card>
    <div class={sectionClass}>
        <h3 class="slds-section__title">
            <button class="slds-button slds-section__title-action" onclick={handleClick}>
                <lightning-icon
                    icon-name="utility:switch"
                    class="slds-button__icon slds-button__icon_right slds-section__title-action-icon"
                    size="x-small" slot="actions">
                </lightning-icon>
                     <span class="slds-truncate" title={label}>Notes</span>
              </button>
        </h3>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item class="slds-p-around_xx-small" size="12">
              <lightning-layout>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 1">Address Notes</h3></div>
                        
                        <div style="margin-left: 41px;"><lightning-Button label="Notes" icon-name="utility:form" class="slds-float_right"></lightning-Button></div>
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 3">Health Notes</h3></div>

                         <div style="margin-left: 41px;"><lightning-Button label="Notes" icon-name="utility:form" ></lightning-Button></div>
                    </div>
                  </lightning-layout-item>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 2">Income Notes</h3></div>

                        <div style="margin-left: 41px;"><lightning-Button label="Notes" icon-name="utility:form" class="slds-float_right"></lightning-Button></div>
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 4">Expense Notes</h3></div>

                        <div style="margin-left: 41px;"><lightning-Button label="Notes" icon-name="utility:form" class="slds-float_right"></lightning-Button></div>
                    </div>
                  </lightning-layout-item>
                
              </lightning-layout>
            </lightning-layout-item>
          </lightning-layout>
    </div>
</lightning-card>
</template>

Please Mark It As Best Answer If It helps
Thank You!
JohnDuraiJohnDurai
Thanks @CharuDutt really helps a lot, but i already have component for that Notes button, I need to call that component and use the functionality inside my component (I belive Component communication)
CharuDuttCharuDutt
Hii John Durai 
i've Done Some Changes 
<lightning-layout multiple-rows="true">
            <lightning-layout-item class="slds-p-around_xx-small" size="12">
              <lightning-layout>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 1">Address Notes</h3></div>
                        
                        <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 3">Health Notes</h3></div>

                         <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                  </lightning-layout-item>
                
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 2">Income Notes</h3></div>

                        <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div><h3 class="field-title" title="Field 4">Expense Notes</h3></div>

                        <div style="margin-left: 41px;"><c-ComponentName EventName={Handle}></c-ComponentName></div>
                    </div>
                  </lightning-layout-item>
                
              </lightning-layout>
            </lightning-layout-item>
          </lightning-layout>

Please Mark It As Best Answer If It helps
Thank You!
This was selected as the best answer
JohnDuraiJohnDurai
Thanks CharuDutt it helps a lot.