Questions tagged [slds-grid]
For questions regarding slds-grid from the Lightning Design System
58
questions
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=...
- 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 ...
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-...
- 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">
...
- 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 ...
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 ...
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(...
- 13
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=&...
- 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....
- 179
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-...
- 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-...
- 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 ...
- 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 ...
- 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">
...
- 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 ...
- 107
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-...
- 310
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="...
- 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 &...
- 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&...
- 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 ...
- 87
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
<...
- 11
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 ...
- 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-...
- 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-...
- 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/...
user83806
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 ...
- 65
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">
...
-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 ...
- 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 ...
- 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="...
- 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,...
- 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 ...
- 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-...
- 1,125
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 ...
- 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 ...
- 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 ...
- 101
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 ...
- 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, ...
- 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....
- 155
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 ...
- 177
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 ...
- 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-...
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 ...
- 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 ...
- 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 ...
- 591
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 ...
- 591
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 ...
- 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 ...
- 3,222
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 ...
- 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 />
<...
- 2,293