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
3answers
45 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
20 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
20 views

VF Page with SLDS and expecting Header to show Custom Image [closed]

I am new to VF page and SLDS, and trying to build a simple Form.Expecting the header and footer of the form to hold custom images by loading these images into static resources. However below are my ...
0
votes
0answers
15 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
39 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
33 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
27 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
23 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
24 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
16 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
13 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
73 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
54 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
25 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
101 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
58 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
36 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
43 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: ...
0
votes
1answer
76 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
39 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 ...
1
vote
2answers
54 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
132 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
53 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
212 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 ...
1
vote
1answer
85 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
77 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
34 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
101 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
147 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
41 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
165 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
23 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
48 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
30 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
48 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
43 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
76 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 ...
1
vote
1answer
442 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
567 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
138 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
0answers
119 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
109 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
78 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
60 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
313 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
295 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
235 views

how to add slds info icon in VF page? [duplicate]

In my VF page i have header .I want to display info icon before my text (before Note). Vf Code <div class="slds-page-header"> <apex:outputpanel rendered="{!isSuccess}"> <...
0
votes
1answer
87 views

Lightning design system(LDS)- what is possible?

We've implemented couple of lightning based projects involving medium usage of LDS. So far our approach is to build any UI is Check the requirements from business Consider possibilities within LDS ...
4
votes
1answer
725 views

How to add a functionality to stop copy paste on an input field in lightning?

I'm making a form that includes two fields, Email and Re-Enter Email. I don't want the user to copy and paste the email id in the second field. I have to prevent right clicks on the re-enter field and/...