0

enter image description here

enter image description here

Can anyone guide me on how to align columns and rows?

<template>

<lightning-card  title="Opening hours">

    <!-- Monday -->   

    <div class="slds-grid slds-no-flex">
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"> 
                <lightning-badge label="Monday   :"></lightning-badge>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="toggle" message-toggle-active="Open" message-toggle-inactive="Close" checked></lightning-input>
            </div>
        </div>
    </div>
    <br></br>

    <!-- Tuesday -->   

    <div class="slds-grid slds-no-flex">
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-badge label="Tuesday:"></lightning-badge>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="toggle" message-toggle-active="Open" message-toggle-inactive="Close" checked></lightning-input>
            </div>
        </div>
    </div>
3

I think you are using incorrect classes for column sizing. The slds grid is a 12 column grid, not 16. You need to divide the viewport into 4 division. It can be 3,3,3,3 or 2,4,4,2 or anything else.

Based on that you can fix the slds col classes.

Also in your lightning:input, if you do not want to show the label, use the variant="label-hidden"

<div class="slds-grid slds-no-flex">
        <div class="slds-col slds-size_2-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"> 
                <lightning-badge label="Monday   :"></lightning-badge>
            </div>
        </div>
        <div class="slds-col slds-size_4-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-col slds-size_4-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-col slds-size_2-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="toggle" message-toggle-active="Open" message-toggle-inactive="Close" checked></lightning-input>
            </div>
        </div>
    </div>

You can also utilize lightning:layout for this.

| improve this answer | |
  • Thanks @manjit5190 ! Your answer was very useful. Still cant align the heights (horizontally) and remove the borders, any idea? – Tomas Garcia Etchegaray Apr 28 at 7:52
  • 1
    The borders are there because you are using slds box class. You will need to make sure that apply a class only of you know what it does. – manjit5190 Apr 28 at 7:53

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.