Questions tagged [slds-grid]

For questions regarding slds-grid from the Lightning Design System

Filter by
Sorted by
Tagged with
0 votes
1 answer
47 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=...
user avatar
  • 4,591
0 votes
0 answers
20 views

How to make Red Box on required field like Message type Name field has on it?

I want to added red box on repository field like name has. <div class="slds-float_none float-none" style="margin-top: -22px;"> <c:Strike_lookup ...
user avatar
0 votes
1 answer
136 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-...
user avatar
  • 130k
0 votes
0 answers
69 views

lwc date field calendar year part missing (not able to select year)

<!-- 1st row start --> <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12"> <label class="slds-form-element__label"> ...
user avatar
  • 1
0 votes
1 answer
166 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.stack.imgur.com/wnjw7.jpg How could I change this to show as many cards as possible? Should I use some attribute from SLDS ...
user avatar
0 votes
1 answer
113 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 ...
user avatar
0 votes
0 answers
43 views

Long Text in Li is displayed in the second line behind the bullet point

I have tried using text-indent, still no use. Please help me on the below code and let me know where am doing wrong **css*** .checkList li:before, .check { padding-left: 10px; color: rgba(...
user avatar
1 vote
1 answer
345 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=&...
user avatar
  • 119
1 vote
1 answer
214 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....
user avatar
1 vote
1 answer
385 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-...
user avatar
  • 13
-1 votes
1 answer
592 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-...
user avatar
  • 1
0 votes
1 answer
86 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 ...
user avatar
  • 33
0 votes
1 answer
679 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 ...
user avatar
  • 392
1 vote
1 answer
196 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"> ...
user avatar
  • 392
0 votes
1 answer
125 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 ...
user avatar
0 votes
1 answer
191 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-...
user avatar
1 vote
0 answers
123 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="...
user avatar
  • 501
5 votes
2 answers
870 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 &...
user avatar
  • 4,697
0 votes
1 answer
318 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&...
user avatar
  • 5
0 votes
1 answer
285 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 ...
user avatar
1 vote
1 answer
334 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 <...
user avatar
0 votes
1 answer
443 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 ...
user avatar
  • 3
6 votes
2 answers
5k 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-...
user avatar
  • 8,360
1 vote
0 answers
203 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-...
user avatar
  • 453
0 votes
1 answer
2k 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/...
user avatar
0 votes
1 answer
4k 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 ...
user avatar
0 votes
1 answer
5k 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"> ...
user avatar
-1 votes
1 answer
326 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 ...
user avatar
  • 43
0 votes
1 answer
819 views

flex direction css class not found in lightningdesignsystem

I'm new in SLDS. I start working a project with my client. I looking the design part of that project. I seen SLDS using CSS3 Flexbox property. It's good but some Flexbox property is missing. Like Flex ...
user avatar
  • 101
0 votes
2 answers
4k 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="...
user avatar
  • 4,591
0 votes
1 answer
1k 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,...
user avatar
  • 215
0 votes
2 answers
2k 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 ...
user avatar
  • 943
1 vote
1 answer
960 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-...
user avatar
2 votes
1 answer
1k views

How to use all column width in slds Grid?

I'm using lightning-record-form to build a simple To-Do style checklist. The functionality all works fine however the checklist fields are only using 25% of the column space. Is there a way to fix ...
user avatar
  • 616
0 votes
1 answer
1k views

Lightning LayoutItem flexibility not working properly

I am using lightning setup assistant in my UI, and I am trying to make it mobile responsive. The button in question here is Add Email Address I am trying to set size attributes accordingly, however ...
user avatar
  • 515
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 ...
user avatar
3 votes
1 answer
380 views

How to extend the SLDS Grid with additional x-large and xx-large breakpoints to support huge screens?

I need a grid having 1 columns for phones 2 columns for ipads and 3 columns on 1080p screens. I will also need more distinction for devices between 1000px and 3000px in screen-width. How to do that ...
user avatar
  • 33.7k
0 votes
1 answer
88 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, ...
user avatar
  • 33.7k
3 votes
3 answers
6k 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....
user avatar
0 votes
1 answer
254 views

How to fix Apex:Inputfield Size when using slds sizing?

I am working on a vf page with a random number of fields. The problem I'm facing is related to the sizing of the fields. As shown in the screenshot, the contact number field is one long field instead ...
user avatar
0 votes
0 answers
1k views

Lightning Tree Grid using SLDS - Make rows expand collapse

I have created a tree grid structure using the code base found here at the SLDS documentation url : https://lightningdesignsystem.com/components/tree-grid/ The problem I am facing is that I am not ...
user avatar
  • 1
1 vote
3 answers
6k 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-...
user avatar
0 votes
1 answer
379 views

SLDS grid ugly rendering with lightning:outputField

I am trying to display a record using lightning:recordviewform and using slds grid inside it to format columns. It looks like below when I am using slds-size_3_of_12 As you can see, there is still ...
user avatar
  • 63
5 votes
2 answers
3k views

slds-gutters not adding spacing between div's

The slds-gutters class does not seem to add spacing between the div's. What is the reason for this? Essentially I could add padding, but I would like to understand why there is no spacing between the ...
user avatar
  • 427
2 votes
1 answer
412 views

Showing error using SLDS Has Error on Apex:Inputfield with Aria-describedby

I am using the SLDS in visualforce page and trying to display error next to the component by following this. But aria-describedby does not work with <Apex:inputfield> and throws error. Here's ...
user avatar
0 votes
1 answer
949 views

SLDS Spinner with backdrop on VF Page on Button click [duplicate]

I am trying to add a spinner with a backdrop as the loading screen but the spinner is not working when the action function is invoking. Action function is able to call the apex method but not invoking ...
user avatar
0 votes
1 answer
185 views

Same Size for each cell in a grid

i would like to implement a grid for kind of eCommerce presentation . For that I need that all my cells in the grid have the same size but in every cells there is an image sometimes big sometimes ...
user avatar
  • 443
0 votes
1 answer
529 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 ...
user avatar
2 votes
1 answer
7k views

How to add left and right borders using slds

Image: In this image, The edges are not cutted very properly.I really Look some thing like this. I have tried using "slds-box" still issue is same. How to do like this: Lightning code: <div ...
user avatar
  • 2,264
0 votes
1 answer
222 views

How to set up apex:selectRadio in a grid layout

I'm trying to achieve below layout. Below is my code (with 2 approaches) on VF page. <apex:page lightningStylesheets="true" applyHtmlTag="true" > <apex:includeLightning /> <...
user avatar