Salesforce

Questions tagged [slds-grid]

Ask Question

For questions regarding slds-grid from the Lightning Design System

43 questions
Newest
Active
Bountied
Unanswered
Filter by
Sorted by
Tagged with
0
votes
0answers
10 views

How to increase width expand in lightning tree grid

I have added the extra text in an expanded row but I cannot increase the width in the expanded row in lightning grid
0
votes
1answer
34 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
1answer
69 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
0answers
32 views

How can I create the picture's UI with only slds for mobile?

I need to create the responsive mobile UI with LWC and only SLDS as like the image file. I understand that SLDS uses slds-size, slds-grid, slds-wrap when creating responsive screens. In that case, ...
1
vote
1answer
71 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
1answer
128 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 ...
5
votes
1answer
597 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-...
1
vote
0answers
77 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
1answer
452 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
1answer
712 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
1answer
899 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"> ...
-1
votes
1answer
92 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
1answer
118 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 ...
0
votes
2answers
731 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="...
0
votes
0answers
18 views

Need help on lightning:card and slds

Hi Ohana ,please help me in the below code to get the look and feel as above screenshot. Component :- <aura:attribute name="acclstRec" type="List" /> <aura:handler name="init" ...
0
votes
1answer
185 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,...
0
votes
2answers
631 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 ...
0
votes
1answer
315 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-...
2
votes
1answer
441 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 ...
0
votes
1answer
625 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 ...
0
votes
2answers
583 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 ...
3
votes
1answer
145 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 ...
0
votes
1answer
17 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, ...
0
votes
2answers
2k 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....
0
votes
1answer
95 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 ...
0
votes
0answers
807 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 ...
1
vote
2answers
3k 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-...
0
votes
1answer
263 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 ...
5
votes
2answers
1k 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 ...
2
votes
1answer
199 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 ...
0
votes
1answer
527 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 ...
0
votes
1answer
75 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 ...
0
votes
1answer
277 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 ...
2
votes
1answer
3k 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 ...
0
votes
1answer
154 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 /> <...
4
votes
1answer
914 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> &...
0
votes
1answer
2k views

slds grid column alignment problems!

For some time i have been trying to left align the center column, but still keep it at the center. ON the image below you can see the icons with the counts for each service, but not aligned to the ...
2
votes
2answers
1k views

How to adjust column width in <lightning:tile> <dl class=“slds-list_horizontal”>?

I tried following the SLDS Utilities patterns for both Name Value Pairs and Description List... In both attempts, the labels' text was truncated, and the tiles had an undesirable excess of white ...
2
votes
0answers
312 views

SLDS Grid Columns Not the Same Width

I'm creating a form and using lightning:layout and giving the lightning:layoutItem a size of 4, which renders <div class="slds-size_4-of-12">. However, I noticed that the last column in the grid ...
0
votes
1answer
2k views

Salesforce lightning setting slds column rows to be the same height

I'm using lightning:recordEditForm with lightning:inputField to generate a list of fields. I dynamically create a lightning:inputField component and add it to an slds column. The lightning:...
2
votes
3answers
3k 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="...
-2
votes
3answers
223 views

How to avoid break tag in slds

I'am very new to salesforce Lightning design system(slds). I have used slds-grid in my Lighthing componnet. I need to achieve image in following format: But actually its appearing like this: I ...
2
votes
1answer
4k views

Sizing the layoutitems based on size of the top container and not the viewport

We have built a lightning component which is to be used on the record home page. Now the user can either add the component in the side or in the detail section itself. Everything is working fine ...