Skip to main content

Questions tagged [slds-grid]

For questions regarding slds-grid from the Lightning Design System

Filter by
Sorted by
Tagged with
0 votes
2 answers
2k views

Make slds-grid with 6 exactly equally square sizes (2 Rows & 3 Columns) & acquire all space

I am currently working on Building a Lightning Component, i am facing issue of size of each grid when i put layout in it there sizes are changed, all i want exactly same square sizes of 6 grid with 2 ...
4 votes
1 answer
1k views

Make lightning:layoutItem fill the remaining screen space

I have the following component markup and essentially, I'm trying to make the content in yellow to fill the remaining space on the browser. I tried to do 100% but it did not expand. See screenshot ...
1 vote
1 answer
2k views

Vertical Alignment of Button in Grid Column

In my Lightning Grid one of the columns contains an Input Field and the one next to it contains a button. Ideally I would like the button icon to align vertically with the input field and horizontally ...
0 votes
0 answers
14 views

How to setup slds-grid for screens with less than 480px

My slds-grid gets broken when pixels of the screen gets less than 480px, as per salesforce documentation, there is not option available for screens less than 480px to set grid for. But Mobile screens ...
1 vote
1 answer
1k views

test lwc zoom in and zoom out oprto

whenever user zoom the screen two values gets overlapped with each other. kindly help me out for this. without zooming it looks perfectly fine. kindly help me out for this. below is my HTML code <...
0 votes
0 answers
59 views

Show different templates when the browser gets resized for LWC

I am trying to create an LWC that comprises of 5 child bricks inside of a parent layout container. I am using these wrapped in lightning-layout-item and layout respectively. In between each of the ...
0 votes
0 answers
45 views

slds-grid question

Would it be possible to create an slds-grid like below?
0 votes
2 answers
147 views

LWC Component vertical alignment issue

I am trying to make the button the same height of the input boxes put together. Below is the pic. I tried using the slds-grid_align_center which didnt make any difference at all. Here is my code - &...
1 vote
1 answer
2k views

SLDS Grid evenly spaced with no overflow

I can't seem to achieve what I am looking for. I basically want to have a slds-grid container that will create evenly spaced child <div> containers (slds-col ?) and not shrink or grow depending ...
0 votes
1 answer
134 views

why is my slds-grid not fitting to page?

I have a datatable inside of a slds-grid so that I can have multiple tables side by side. When I do this though, the LWC does not fit to the page. Is there a tag I am missing that will enforce strict ...
0 votes
2 answers
428 views

Center aligned grid with content left justifies

I have a grid where we have 4 columns like below: The problem is that I wan't the 4th column to start from absolute left of the center aligned grid. How can I achieve this? Below is the code: <div ...
0 votes
0 answers
735 views

Placing images in LWC using slds

I have been trying to work on some images to be placed in a particular pattern. The images appears to indicate about the record. If the record's field abc = true then I display images 1-8 below. If a ...
1 vote
1 answer
432 views

LWC - For each Quote, render it as a vertical column in the Grid

I'm trying to create this with LWC selectedQuoteList loads and iterates just fine. I'm just not able to format the grid as you see in the mockup above. Instead, the data is rendered stacked, like ...
0 votes
3 answers
10k views

Trying to create a list dotted list in lwc component

LWC component- <template> <div class="slds-scope"> <p class="slds-text-heading_label slds-m-bottom_small"> Sample </p> <div class="...
-2 votes
1 answer
542 views

lightning icon size is changing

I am using lightning-icon in a tile.But for a sentence ,the size of the icon is changing.(icon is not in round shape). [![<template> <div class="values"> <div ...
0 votes
2 answers
682 views

Basic LWC SLDS but columns horizontally uneven

SLDS newbie here. Here's my html: <template> <div class="slds-grid slds-wrap" > <div class="slds-col slds-card slds-size_1-of-4"> <p>...
0 votes
1 answer
263 views

alignment issue with lwc

I have a table in which we have 3 mandatory input whenever a value is missing we have a alert message coming below the input but that is causing alignment issue as the input with no error are little ...
0 votes
1 answer
1k views

How to style and align 3 fields in LWC component

<template> <lightning-card title="Update Service Appointment Earliest Start Time" icon-name="utility:date_time" > <span> <div class=...
4 votes
3 answers
11k views

Vertical padding between grid rows in lightning grid

Is there a way to vertically provide some gutter between the rows in a grid? Currently there is a gutter option but only for columns. I am following this article for reference https://www....
2 votes
1 answer
3k views

How to use SLDS responsive sizes when an LWC is in a multi-column page?

The size breakpoints in SLDS are based on the screen size which works great for LWCs that occupy the full width of the screen e.g.: <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-...
0 votes
1 answer
766 views

How can I show more than 3 cards in LWC?

My page looks like this (I can see only 3 cards but there are more) https://i.sstatic.net/wnjw7.jpg How could I change this to show as many cards as possible? Should I use some attribute from SLDS or ...
0 votes
1 answer
751 views

Responsive lightning web component image issus

This code work correctly except the uploaded image I want it to have a specific width & height even if the image is large or small , the size should be the same for all of them . What can I do for ...
1 vote
1 answer
2k views

Add blank space in record edit form LWC

I have an LWC Record Page component that has two columns. The two columns have almost the same number of fields with one exception. I need to add a blank space on the second column: <div class=&...
1 vote
1 answer
1k views

CSS styling hooks not applying for lightning-badge in LWC

I have the below lightning-badge component where I am trying to change the background color. The background color is not changing. What could be the issue? HTML: <lightning-badge label={product....
-1 votes
1 answer
3k views

how to align combo box and help text near in LWC

I have one combobox in popup and i am adding one icon near to combobox field but its not alligning correctly <div class="slds-modal__content slds-p-around_medium" id="modal-content-...
1 vote
1 answer
2k views

need to display Icon near to field label in LWC for Combobox

I have t create one icon and need to show near to field name for combobox in modal window below is my code <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-...
0 votes
1 answer
526 views

slds grid broken layout when screen narrows to less than 480px

I'm using slds-grid. On large form factor the grid has 2 columns & on Medium & small forms 1 column - truncated. Issues: When screen narrows less than 768px, the grid component is not ...
1 vote
1 answer
4k views

Lightning Layout - Align Bottom

I'm trying to see if this layout is possible with lightning layout without thinkering about the positioning via CSS. Basically, what I'm trying to do is to line up the content C layout with the green ...
1 vote
1 answer
2k views

Lightning Layout & Layout Item Question

We have this sort of complex layout item design and my issue is some of the elements keeps going in to the next line. <lightning:layout> <lightning:layoutItem size="12"> ...
0 votes
1 answer
450 views

slds-grid system not working as expected

My requirement was to dynamically render div's in an grid horizontally once a platform event is received to the component. Here is my code and what i am doing as of now : HTML : <!--The Grid ...
0 votes
1 answer
2k views

Define SLDS small, medium cut-off

I want to have responsive button sizes, and I am using SLDS to accomplish that. Here is my HTML Code: <aura:component controller="CreateTaskLightningController" implements="force:appHostable,...
-1 votes
1 answer
495 views

Need help in SLDS

enter code here Need to create design like this in screenshot. I am ready with the component but not sure what SLDS i can use to : 1) Showing Green Border top of each section 2) Display fields in 2 ...
0 votes
1 answer
760 views

How would you get a child's grid to align to the Parent's grid? (Lightning Design System)

In essence I am trying to achieve LDS Column Nesting but with child components inside of a parent component. I am trying to have the child components, of the parent's, stretch out to the their size_4-...
6 votes
2 answers
11k views

How to make SLDS grid columns fill 100% of available height on the screen?

I would like to create a layout similar to this: I have this code: <div class="slds-grid slds-gutters slds-grid_vertical-stretch"> <div class="slds-col slds-size_3-...
2 votes
0 answers
519 views

Lightning Datatable does not properly resize when inside grid (flexbox)

Normally the width of a <lightning-datatable> changes dynamically as you change the width of the browser. However, When I put a <lightning-datatable> inside a grid (<div class="...
2 votes
3 answers
9k views

Make child rows selected on selecting parent row - lwc tree grid

Is it possible to implement the logic - when parent row is selected all its child rows are selected as well with lightning web component and tree grid? HTML: <lightning-tree-grid key-...
4 votes
2 answers
2k views

How to hide Lightning Design System Grid item when screen is Small (>= 480px)

I have a Grid which has three columns: <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12"> <span>1</span> </div> &...
6 votes
2 answers
2k views

Is there a difference of using lightning-layout VS <div class="slds-grid">?

There are 2 ways to create flex layout in salesforce lwc: lightning-layout and <div class="slds-grid">. If we use Chrome dev tools, we'll notice that lightning-layout compliles into &...
2 votes
3 answers
7k views

Allign button at the same level of input field

I want to allign create button at the same level of input field i.e exact right side of the input field, in the same line. In the below code, it is coming at below level of the field <div class="...
0 votes
1 answer
791 views

Grid with Spaces in SLDS

Below is the screenshot of my HTML it looks very ugly(I am not a front end guy) Which SLDS design should i use to make it look good? <template> <div class="slds-theme_default&...
0 votes
1 answer
705 views

SLDS Responsive Classes (setting gutter size for different breakpoints) [closed]

Apologies if I missed it in the documentation, but I'm wondering if the Salesforce design system provides any way to change the gutter amount based on breakpoints? Via classes, I see you can change ...
0 votes
1 answer
919 views

how to remove the chevrondown button in treegrid???? in Lightning Web Component - Tree Grid

I checked here https://www.lightningdesignsystem.com/components/tree-grid/#site-main-content that there is an option to "When a branch doesn't have children, apply slds-is-disabled to the ...
1 vote
0 answers
358 views

Align columns vertically in a grid so that it fills empty space

I need to fill empty spaces of columns height wise but it is not filling of its own. Sometimes my one column can be of different height. I have used it like this: <div class="demo-only demo-...
0 votes
1 answer
4k views

How to change row color? and to stop hover on row color [duplicate]

I need to change the color of the row in the table to red instated of gray color. i have used the playground but i cannot change it, https://developer.salesforce.com/docs/component-library/tools/...
0 votes
1 answer
8k views

Using slds grid I want to display 3 lightning cards in one row

I have a parent component sending the values for lightning card one by one to the child component. The child component contains the lightning card. I want to display 3 cards in one row but all the ...
0 votes
1 answer
11k views

Align lwc made with Grid - Lightning Design System

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"> ...
0 votes
1 answer
1k views

I need a grid with 7 equally spaced columns

I'm trying to use lightning-layout and lightning-layout-item to get a row with 7 equally spaced columns (no matter the contents) that fills the full width of the container. slds-grid is useless ...
0 votes
2 answers
3k views

How to control row height in lightning:layout

I have a lightning:layout with a lightning:layoutItem, containing a lightning:select. I want the row in the layout to be only the height of the select box but I can't figure out how to remove the ...
1 vote
1 answer
2k views

slds-size Not Working Properly For All Elements

I have the following HTMLin a Lightning Web Component: <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_1-of-3 slds-p-bottom_small"> <div style="font-...
0 votes
1 answer
527 views

SLDS Grind: how to prevent the inner spacing form being bigger than the outer spacing?

For my taste the visual appearance of https://archive-2_0_3.lightningdesignsystem.com/components/utilities/grid has a flaw. In all the examples the elements have just a "normal" kind of padding, ...