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
3
votes
1answer
599 views

How to make Button on LWC card look like native UI

I have a LWC component that (tries) to visually mimic the native Task List using lightning-card and lightning-button-menu but the New Button just looks different regarding the padding and size of the ...
1
vote
0answers
32 views

When aura component is added on details tab of a record modal won't preview in full-screen unlike in spring '19

This is only occuring when winter '20 is released. Already read the documentation of modals in slds didn't find any workaround.
0
votes
1answer
28 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 ...
2
votes
1answer
137 views

How to work with the lightning design system CSS framework

I was asked by an employer to create a basic web page using Javascript, HTML, CSS, and to use the lightning design system CSS framework. I'm completely new to salesforce and I was wondering how ...
0
votes
3answers
282 views

Lightning: Stop page refreshing WHEN Enter key is pressed

I am using the ui:inputtext for lightning component. When the user hit enters the page refreshes. Is there anyway to stop it from doing that. Cmp <aura:component controller="MovieController"> ...
0
votes
0answers
303 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 ...
0
votes
0answers
21 views

Lighting:tabset rendering tabs in “more” drop down when tabs are populated dynamically even though it has enough space to display all tabs

My sample code is <div class="flexipageComponent"> <div class="tabset slds-tabs_card uiTabset--base uiTabset--default uiTabset flexipageTabsetV2"> <div role="application ...
0
votes
1answer
100 views

How to call a method from SLDS button class?

How can I call a method from my controller by using an SLDS VF page. I am using a button icon, that is showing on each record returned from a search. I would like when clicked to call a method from my ...
0
votes
2answers
85 views

SLDS VF Page Cancel button not working

When I click on Cancel button that is part of the VF SLDS page, I get an error specifying that Last Name for contact is needed.How can I bypass the standard field validation? Here is my button: <...
1
vote
1answer
222 views

How to make SLDS tooltip appear on hover over?

I have created an input check box that is on SLDS visualforce page. I am trying to display help text when a user hovers over the help icon. How can I set up the hover over action so that the tooltip ...
0
votes
1answer
47 views

How to add help text to fields with SLDS

I have a VF page which has SLDS formatting. I am trying to add help text to certain fields. I am using Custom Controller and am instantiating a Contact in my Constructor to get out of the box field ...
1
vote
1answer
55 views

Using slds, td in a table has overflowing text area. I need it to wrap

<td class="slds-form-element slds-size--1-of-12"> <apex:outputField label="Reason" value="{!rl.Reason__c}" styleClass="slds-output"/> </td> I have a text area field - Reason__c. it'...
1
vote
0answers
28 views

How to pre-populate standard Account edit page fields from a VF page with custom controller?

I have done this in the past, but it has been a while, and want to make sure if there are better ways of doing this. I have a custom SLDS VF page with a button "Create Account". A user will populate a ...
-1
votes
1answer
35 views

How to set Action Icon as a button in VF SLDS?

Is it possible to set an Action Icon to be a button? In my VF SLDS page, I am returning a list of records. For each record, I am showing an icon. I would like when for a specific record, the icon is ...
0
votes
0answers
215 views

Display lightning layouts in two different pages while printing - LWC

On Account record page i have a parent LWC which has a button. On click i am redirecting to childLWC. ChildLWC has two layouts. On print the page i want the two layouts should come in two different ...
2
votes
0answers
115 views

Visualforce page embeded in page layout is not coming with 100% width in lighting compact density

I have a visualforce page embeded in pagelayout and page is showing the 100% width for comfy but for compact it is not showing 100% width. Can any one tell me how to fix this issue?
0
votes
0answers
51 views

How bring Lightning component within a modal popup to front?

I have a lightning component in a modal popup and that lightning component is having an input lookup field which opens another lightning component(search result box in screenshot). <Parent ...
0
votes
1answer
357 views

Need help on SLDS with LWC

I am trying to implement the Custom Date Range Picker using Lightning Web Component Framework. My Code is allowing to select start Date and End Date and it is also highlighting the days in between ...
0
votes
0answers
117 views

SLDS icon not working in production but working in community and sandbox

I have a VF page which is sitting inside a managed package. This page displays a bunch of records and allows users to comment, edit and delete records. I have used SLDS icons to display my action ...
0
votes
0answers
87 views

A Data Table with both column and row headers present using SLDS?

I need to create a Data Table with column header and row header. Data Table from the Component <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-...
0
votes
1answer
109 views

Slds brand band not appearing with custom component in visual force page

The slds brand band disappears after the component is loaded into the div. How do i fix this issue so that i can have the salesforce background with my custom component. Steps to reproduce: ...
1
vote
1answer
199 views

Is possible to use lightning:combobox with grouped options?

In the SLDS documentation, it is stated the possibility to have a combobox with grouped options. It is possible to achieve a similar result with the lightning aura component lightning:combobox? In ...
0
votes
1answer
56 views

How to save HTML code from web page?

I want to send email after showing preview. For preview, I am using slds-modal in lightning component. It's layout is as shown in image. Is it possible to save html code of modal content and send it ...
2
votes
2answers
277 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 ...
5
votes
1answer
27 views

Can I use Prompts from SLDS in my managed app?

While reading through the docs about Promts, I noticed this guideline: Note: If you’re a partner building an app that appears within Salesforce, don’t use this component. Does it imply that I ...
1
vote
2answers
615 views

Lightning Path Style Issue in Lightnign Web Component

I am trying to create a lightning path in LWC, for which I used two components with SLDS Path. But the view is not as expected to Chevron. Parent Component: customPathLwc <template> <...
0
votes
1answer
125 views

Does exist an expression lightning component and/or expression lightning web component equivalent to SLDS expression?

In the SLDS documentation, I've found a whole page about expressions, how to use them and how to make them similar to the ones implemented in Salesforce UI. Does exist something similar as a ...
0
votes
1answer
721 views

SLDS Button refreshing entire page on click in LWC

I am just after a simple button icon to indicate a warning. I need it to pop up a tooltip on click of the errors. So I found <lightning-button-icon> which was just about what I needed. The ...
2
votes
1answer
253 views

How to get rid of up and down arrow buttons from a lightning duallistbox?

The documentation doesn't seems to have that information covered. Did anyone had same issue figured a way to hide that column?
0
votes
0answers
113 views

Use SVG in Lightning Web Component

I'm trying to use the Going Camping illustration from the SLDS documentation, I tried to copy-paste the code and put it in Playground but nothing comes up except for the text, same if I copy it to ...
1
vote
1answer
67 views

How to implement SLDS Notification in Lightning Component inside Site (Lightning out)?

I would like to show a notification in Lightning component that is acceded via Lightning Out in Site, I cannot use Toast messages. The message that I want to show are on success and on error. Any ...
0
votes
1answer
482 views

align Lightning modal header text to left

want to align lightning modal text header to extreme left (Styling issue) just want to align terms and condition text to left side but not shifting even after applying css align: left modal.cmp ...
0
votes
0answers
347 views

Table headers not wrapping in slds table

I have used slds table <div class="slds-wrap slds-cell-wrap slds-p-top_xx-large"> <table class="slds-...
0
votes
0answers
79 views

How to add the css in lightning component style class

I am using a third party lightning component in 'lightning Flow' to display dynamic questions. Some checkboxes are getting displayed via that lightning component but their width is set to 100%. I ...
0
votes
1answer
510 views

How to add css to override existing styling in lightning component

I am using an existing lightning component that displays some checkboxes. I am wondering if there is a way to reduce the size of the checkboxes. <design:component > <design:attribute ...
0
votes
0answers
30 views

How to validate the <apex:inputfields> on form submission and show error using SLDS?

I am using SLDS in a VF Page and I am referring to this link here to show error. The problem is the error is displayed on page load because I am not removing the Slds-has-error class. But, how do I ...
2
votes
1answer
86 views

Way to preview slds classes

Is there a way to preview how a component will react if I add a new slds class to it? I am new to Lightning component development, doing my development in VS Code and using scratch orgs. Currently I ...
0
votes
1answer
118 views

Show error when user has entered value and removed it or field is empty while submitting the form in SLDS

I have a few input fields on the layout and all of them has slds-has-error class to get the red box along the field and displaying field is required text beneath the field. However, my problem is, ...
0
votes
0answers
76 views

Use the Salesforce Lightning Design System to Style Visualforce Pages Issue

Working through the Visualforce Mobile module I want to do an exercise (3rd unit) that consists of displaying the contacts their names and phone numbers. <apex:page showHeader="true" sidebar="...
2
votes
1answer
92 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
233 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 ...
2
votes
1answer
1k views

Table row LWC breaking SLDS styles

Situation I'm building a table row LWC to separate and encapsulate some logic like so: <!-- tableComp.html --> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> &...
0
votes
1answer
2k views

LWC lightning-button-menu alignment

I use lightning-button-menu component and would like to align the menu top. I found that it can be aligned left or right, but it there a possibility to align top? <lightning-button-menu ...
0
votes
0answers
366 views

Space between columns in a grid - not symmetric

In the simple bellow grid I would like to separate colons with a small blank.For this i use the class slds-gutters on the grid. The problem is that it also put a blank after the last column of the row ...
0
votes
1answer
236 views

CSS issue with “ slds-popover slds-popover_tooltip”

I used slds-popup in a table. And those popup contains multiselect picklist values options with break(<br/>). My problem is when popup values are more, then its going to the second column. ...
0
votes
1answer
150 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
0answers
126 views

apex:slds not loading for Community Guest user, throws unsupported stylesheet MIME type error

The LDS CSS is not being loaded by using apex:slds tag for Community Guest User. It generates a link tag as below: <link class="user" href="/Customer/slds/css/gx0YG61QwKo3viF0Mc1gTw/min/scoped/one:...
0
votes
0answers
119 views

get label(s) of selected values of checkboxgroup

I would like to get the label(s) of the selected values of a checkboxgroup component. <aura:component> <aura:attribute name="options" type="List" default="[{'label': 'Ross', 'value': '...
0
votes
1answer
652 views

SLDS table content is not truncating the long text

SLDS table is not truncating the long text in table column. I have given slds-truncate class as well but its not working. <aura:component implements="force:appHostable,flexipage:...
-1
votes
1answer
904 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 ...

1 2 3 4 5 8