Questions tagged [slds]

Salesforce Lightning Design System (SLDS) is a collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem.

Filter by
Sorted by
Tagged with
0
votes
0answers
18 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-...
1
vote
1answer
24 views

lightning-input of type “toggle” - any way to change the Inactive/Active text?

For this component:: <lightning-input type="toggle" ...></lightning-input> the "Inactive" and "Active" text appears to be fixed: Is it? Is coding this up ...
2
votes
1answer
32 views

An LWC for SLDS's expandable section?

The SLDS Expandable Section has a distinct background filled header whereas the SLDS Accordion has a horizontal line. I don't see an LWC for an expandable section but do see an LWC for an accordion ...
0
votes
2answers
34 views

Jquery filter is not working on search while type for Table content

I'm trying to have the search while type jquery which would filter the table content based the inputtext typed. https://www.w3schools.com/jquery/jquery_filters.asp I tried to implement the same from ...
1
vote
1answer
42 views

Any way to get lightning-datatable to not render borders?

In SLDS there is the class slds-table_bordered that results in table borders and lightning-datatable emits that class by default. I don't see any way to stop that to have a borderless table that is ...
2
votes
1answer
43 views

How to present a lightning-datatable on mobile devices?

While a lightning-datatable will squish up on a narrow screen, the columns typically become so narrow as to be unreadable. Are there examples anywhere of changing to e.g. tiles for a narrow screen? ...
1
vote
2answers
385 views

Error when running npm run watch on a SLDS application

am currently working on a SLDS lwc application, but I have ran into an issue when running npm run watch where I get an error stating ERROR in ./src/client/index.js Module not found: Error: Can't ...
0
votes
1answer
20 views

upload icon is not applying for use tag in lightning component

I have uploaded Icon's in static resource as a zip format and when i am trying to get upload icon from them while saving component it is throwing error. No function found for key: URLFOR: Source <...
0
votes
1answer
34 views

Lightning Accordion Section Title Bold [duplicate]

Hello Lightning Experts, My requirement is to bold the titles so I used slds-page-header__title slds-truncate in my lightning:accordionSection tag but the sub-headers is also getting bold. What do I ...
-1
votes
1answer
77 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
0answers
17 views

Fixed header using page layout

Hi all I have a header component I'm trying to make sticky/fixed when you scroll. It's working now by adding a class however the page jumps down when scrolling and certain parts are not accessible. ...
0
votes
1answer
27 views

Slds Button With Icon

I'm using the lightning-button-icon inside the SLDS button.(Reason : to Change the button color). button icon is in grey color variant="container" how to change the forward button color to white. &...
0
votes
1answer
21 views

add a widget to a LWC Datatable that calls javascript from a menu

I can't find how this is implemented: I'm using a lightning-datatable and would like to convert my current button-icon to what the triangle/square icon above. when clicked it would show two options: ...
0
votes
1answer
22 views

How can I communicate with component from Visualforce page which has embedded in iframe

I have created one Lightning Component, and loading that from one Visualforce page. When I click on a button in Lightning Component, I am showing another Visualforce page as a Modal (popup) by using ...
1
vote
1answer
452 views

Responsive Layouts in LWC

I have a custom LWC page which has lightning-layout-item My Page has Header, Left layout and Right Layout. When i minimize the window the right layout overlap to left layout. Expecting is to move ...
0
votes
1answer
60 views

Split view in Custom LWC page

I have custom LWC page(it's a site page) Which I'm implementing the Global Header and Split View. Global Header Code <header class="slds-global-header_container branding-header slds-no-print ...
0
votes
1answer
57 views

Show button as header in lwc

The requirement is to create an lwc page where buttons show as header but if i am trying to put button inside the outermost template in the html file the button comes inside the body. How can i ...
2
votes
2answers
48 views

SLDS Allignement to the page Center

I'm new to Salesforce, I'm developing the custom login page in LWC. Below is the code, I'm expection the Form to be in Page Center, Means it should be center in vertically and horizontally. But my ...
2
votes
2answers
69 views

How to get the width of a table inside a LWC to adapt to the widths of its columns?

I have made a LWC that is used on an Account page. Unfortunately I had to resort to the use of raw HTML tables, due to all kinds of reasons. The table can have two to four columns, that depends on ...
0
votes
0answers
38 views

Use this.template.querySelector to access tr to add classList

var trs = this.template.querySelectorAll('tr'); I am trying to access tr from my table inorder to add classList using, for(var count=0; count<trs.length; count++){ trs[count]....
0
votes
1answer
37 views

How do I uncheck the checkbox

I need to uncheck the checkbox on click of a button, but I'm using the checkbox inside the aura:iteration and on using aura:id I'm getting the value as undefined. My Actual Scenario is like there are ...
0
votes
1answer
185 views

how to use SLDS Icons in LWC

I have slds-nav-vertical which will iterate the list with the icon. I'm using slds-icon_container But icon is not coming it's Look like Below. On clicking the above link getting following error ...
-1
votes
1answer
41 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
28 views

slds v/s css style sheet in lwc

I'm just curious to understand which one of the two - slds and css style sheets is better when it comes to performance. which one of the two is more preferable to be used. Thanks
2
votes
0answers
42 views

Any way to scale (zoom) whole Lightning component based Community pages?

We have an internal debate that for a specific Community application, the standard font sizes are too small. So the ideal would be to scale the whole page of content whatever namespace the content is ...
0
votes
1answer
91 views

How to dynamically create lightning cards in lwc, with 2 cards in a single row using grid

I want to iterate over records and display those many number of lightning cards. Each row should have 2 cards using grid. I tried using for:each but it is only working on list. Below is my code: &...
0
votes
1answer
21 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 ...
1
vote
1answer
44 views

Lightning Visualforce page header with icon has no margin and icon not showing. What is wrong?

I have a Lightning Visualforce page which I am displaying via a Detail Page Button from a standard Account page. I am displaying it as 'Display in existing window without sidebar or header'. It is ...
0
votes
0answers
20 views

Sdfc.canvas.parent.publish() function is not able give any result beside the event being fired

I am using Lightning Data service to take an input from my component and take that particular record to be displayed in the canvas app which is an external application. So far there are no errors in ...
0
votes
1answer
77 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
279 views

why aria-expanded=“true” is not working with button click on mobile?

I have a drop down with list which is opened with a button click. When user clicks the button the aria-expanded="false" is false and when user clicks again it will be true. This is working fine in web ...
1
vote
1answer
69 views

Arrange a list of Data in Column and Row format using SLDS

I have a html file where I am trying to display some data in a better way, like this: Job Details | Value _____________|__________ JobType | Future ________________________ Status | ...
3
votes
1answer
261 views

How to output HTML created in JavaScript in LWC?

Specifically I want to create some SLDS tooltip content that includes HTML such as <br/> in my JavaScript LWC controller. There is aura:unescapedHtml and this answer Using unescape HTML in ...
0
votes
1answer
30 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
27 views

SLDS is throwing my 2 lightning components out of vertical alignment with an unnecessary label

This tiny unused label is pushing my selector component down on the page, and now it's out of alignment with the Pagination buttons. I don't want a label for this selector - how can I remove it? .slds-...
0
votes
2answers
146 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
0answers
21 views

Does recordData need to be checked if it has “loaded” in every function call?

In the cmp I have recordData and in the init function I check if it has finished loading before referencing any of the data. cmp <aura:component implements="force:...
0
votes
2answers
389 views

How to close the dropdown menu in LWC

I found the dropdown menu code in SLDS menu, but the menu doesn't close and stays open. I tried removing the slds-dropdown-trigger, but then it behaves like on hover rather than onClick. I want to ...
0
votes
0answers
20 views

How to create custom VF page similar to standard lightning page in salesforce?

I have a existing complex VF page which consist of two VF components nested in it which fetches fields from multiple field sets based upon logged in user. What would be the best way to implement/...
0
votes
1answer
72 views

How to open the dropdown menu on click in Lightning Web Component?

I want to open the dropdown as given https://www.lightningdesignsystem.com/components/menus/ ,when i click the button, here the dropdown stays open. At the bottom it's mentioned that for the same I'd ...
0
votes
0answers
83 views

Making <lightning-helptext> work without slds-scope on body tag

We have chosen not to apply slds-scope to the body tag of our Visualforce application, because it results in some undesirable behavioral artifacts in our legacy application. Everything pretty much ...
3
votes
1answer
36 views

How to use new slds charts in lightning componets

I could see that, salesforce release new feature in SLDS charts under Design Guidelines. https://www.lightningdesignsystem.com/guidelines/charts/ I cannot see any explanation of how we can use these ...
0
votes
1answer
18 views

Simple way to suppress SLDS and so use lightning-record-edit-form/lightning-input-field components inline?

We would like to leverage the benefits of lightning-record-edit-form/lightning-input-field in terms of automatic coupling to field metadata and interaction with the Lightning Data Service, but present ...
0
votes
1answer
102 views

lightning:recordEditForm - Set/update field values on related record

I'm new to LDS and I'd like to take advantage of this feature by limiting calls to the server. I'm able to view the proper field data, but having issues when it comes to updating the record. In the ...
1
vote
0answers
89 views

OSS LWC app on Heroku Css Fails to load

I am trying to run an OSS LWC app on heroku using SLDS via synthetic shadow dom. When I run it locally using heroku local web everything looks great. When it makes all the way to my Heroku site, I ...
1
vote
1answer
49 views

CommandButton & pageBlock title ignoring slds styling

I have a Visualforce page using slds styling, and some of it works and some of it doesn't. The pageBlock title does not have the shaded area around it - just displays the text in bold The ...
0
votes
1answer
191 views

CSS for <lightning-input type=“checkbox” > is not working in LWC

I have the below div inside my LWC html. <div class="container-fluid"> <div class="slds-size_1-of-2"> <lightning-input label="First Name"...
5
votes
1answer
185 views

Auto scale lightning component in VF Page

I am trying to POC a very simple lightning component within a VF page, which is then displayed on a Force.com Sites. I am able to do this, but I need the component to "auto scale" to the correct size,...
0
votes
1answer
36 views

How do I align my lightning styled options in a Visualforce page?

I have a Visualforce page with a selectlist, an inputfield and some buttons. The Selectlist label is above the selection, which makes the alignment funny for the other fields. Any idea how I can fix ...
1
vote
0answers
75 views

Lightning Clickable URL in Data Table

I am trying to make the 'Name' field clickable in a community and having some trouble getting it point to a url. I am following this thread: Hyperlink record name LWC datatable It seems like the ...

1
2 3 4 5
9