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>
Improve this question

1 Answer 1

Reset to default
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
2
  • Thanks @manjit5190 ! Your answer was very useful. Still cant align the heights (horizontally) and remove the borders, any idea?
    – Tomas Garcia Etchegaray
    Commented Apr 28, 2020 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
    Commented Apr 28, 2020 at 7:53

You must log in to answer this question.

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