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
1answer
87 views

Using Salesforce Media Objects

I want to display an image of a user with text right next to the image. Went through SLDS and found Media Objects to fulfill my need. Been trying to implement it but the text is always under the image....
3
votes
0answers
440 views

Submenu inside lightning:buttonMenu component

I have a lightning:buttonMenu with a few lightning:menuItem and want to display a submenu when hovering over one of the options. Having a hard time understanding how to create a submenu. Was ...
8
votes
1answer
1k views

How to use slds illustration?

I looked into this to use illustration in my component. https://lightningdesignsystem.com/components/illustration/ As we can't use svg tag in lightning component, so is there any way by which we can ...
6
votes
2answers
494 views

Will Lightning Base Components fully replace SLDS?

I've noticed that certain Lightning UI features have equivalents across Base/UI Components and SLDS, such as modals. But, some don't. I haven't seen a base-component equivalent of Checkbox Buttons, ...
0
votes
1answer
30 views

Trying to override Description Horizontal List

I'm using the Description Horizontal List from SLDS. My code so far : <dl class="slds-dl--horizontal"> <dt class="slds-dl--horizontal__label"><b>Hello1</b></dt> ...
1
vote
1answer
597 views

How to use SLDS Icon in Visualforce Component [closed]

I have tried to used below code in Visualforce Component <img class="slds-checklrt" src="{!URLFOR($Asset.SLDS,'assets/icons/utility/check_60.png')}" style="width:20px"/> but not getting much ...
0
votes
2answers
66 views

How do i align a button beside textbox in VF using SLDS

I am trying to have a button beside a text box. Its basically a search box with a label and textbox and button. All of them need to be in same line. The code below shows the button on the next line. ...
0
votes
2answers
281 views

VF page issue in lightning experience

I have a VF page created for Salesforce classic using Lightning Design System. The page works fine in Classic. But when I try to view it in Lightning Experience, it doesn't load (CSS) properly. Any ...
0
votes
1answer
627 views

Radio button and pick list fields value is not getting stored in the salesforce org

After finishing the basic lightning component trail I started writing another component of my own choice and when I hit the submit button I get the below error if I cut out the pickList field and ...
1
vote
0answers
2k views

slds-align_absolute-center ruins my layout

I'm trying to use the Lightning Design System whenever I can, but as soon, as I use slds-align_absolute-center all the content gets aligned in a single row, even <br /> was ignored. Why is that (...
1
vote
1answer
42 views

React SLDS unknown error

I've been trying to use the @salesforce/design-system-react, well every time I try and run it, I have this error, I've tried many react versions, and used all the considerations that they give, any ...
3
votes
1answer
246 views

How to access Lightning tokens in bundle other than defaultTokens.tokens

The Lightning [developer guide][1] is not very helpful on how to use Design tokens: Tokens created in the defaultTokens bundle are automatically available in components in your namespace. Ok, ...
5
votes
1answer
228 views

Keep Themes & Branding from overriding SLDS styles

We have a customized version of the path structure in our app that is showing the current status of a process object. To leverage as much as possible of the SLDS we reused as many classes from ...
1
vote
0answers
237 views

How to make a tooltip pop out of it's container

I'd like my tooltip to pop out of it's container, but unfortunately it gets clipped off. Any suggestions about styling that would give me my desired result: My actual result: My code: var ...
3
votes
1answer
495 views

Using design tokens in slds in visualforce

I have a visualforce page that uses <apex: slds/> to leverage lightning design system. I'm trying to set background color on an element using the $color-background-backdrop-tint global variable ...
7
votes
3answers
5k views

Summer 18 - Lightning input variant label-hidden hides the label but occupies the space for label

I am trying to include lightning:select component in a table row. But I don't want to show the label for select input. I am using variant="label-hidden", which hides the label, but the space for the ...
2
votes
1answer
1k 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 ...
3
votes
2answers
784 views

Still trying to Close SLDS Dropdown Menu when clicked outside in Lightning Component?

I am trying to solve the same problem as this question here - How to Close SLDS Dropdown Menu when clicked outside in Lightning Component? There does not seem to be an official answer for this ...
0
votes
1answer
45 views

Lightning Design Classes Not Included on Visualforce page

I am using the lightning design system for creating a visualforce page. However some classes are not included in the slds.css. I have copied and pasted a 'Setup assistant' from the lightning design ...
1
vote
1answer
209 views

How to solve problem of updating css of lightning components with every release of Salesforce?

Lightning make changes in there css with every release. Most of time these changes were minor so we didn't make any changes. But like in summer 18 release there were big changes and we have to release ...
1
vote
1answer
199 views

How to position an element to center inside of a grid column?

On my VF page I'd like to center a content of a grid column. Code: <apex:page> <head> <apex:slds /> </head> <body> <div class="slds-grid ...
0
votes
1answer
116 views

SLDS -pageblocktable not responsive inside an outputPanel

I am using SLDS in existing VF page and I also want the page to be responsive. In the code below the outputPanel is responsive but the pageblock table within it is not responsive and it extends out of ...
0
votes
2answers
2k views

why my div is not hidden

What i try to do here is everytime when I click button. It should hide the div name review and show the div name comment. But now it's not working. It wont hide or show anything. Here is my cmp ...
2
votes
1answer
174 views

UI is not rendered properly. Problem with SLDS

I was trying to create a visual force page but I bumped into an error. SLDS style sheets which I Included in my code is not being rendered. As a result, the entire page looks ugly without CSS. <...
6
votes
3answers
566 views

Summer 18: SVG blocked in Lightning Components

The old approach of using a helper component to display SVG in Lightning now appears to be blocked in Summer 18. What is a bit alarming, though, is that even components marked with API version 40-42 ...
3
votes
2answers
301 views

How to stop the top of a tall SLDS modal from being clipped?

I am using the SLDLS modal styles as documented and in general they work well. Below are two screen shots where the first has a small amount of lines (<p>Line</p> repeated) but the second ...
1
vote
1answer
110 views

External stylesheet being applied to all components

I have a parent component in which there are multiple child components. I have included an external stylesheet in one of my child component using the following code : <ltng:require styles="{!$...
1
vote
1answer
323 views

How to make buttons responsive in SLDS?

I have some table written in Salesforce Lightning Design System. There are two buttons in leftmost column of each row, and I want to make these buttons smaller in mobile media. Fragment of HTML. <...
3
votes
1answer
9k views

lightning:layout horizontalAlign left and right

I want to make some part of components to left and some part to right. In the below markup, I want to make first lightning:layoutItem to align left and rest of it to align to right. How can I achieve ...
0
votes
1answer
103 views

Select List in slds limit

Is there any limit on how many options are displayed in slds SelectList? I see that a few values are not showing up in the select list. I have not specified any filter or anything as such <apex:...
2
votes
1answer
281 views

How can we detect and apply Lightning Experience defined Themes and Branding css styling in Lightning Application?

I'm looking to build a custom Lightning Application (not a Lightning Component). Now, SLDS base component does work nice, I've noticed that Themes & Branding applied theme color do not gets ...
0
votes
2answers
909 views

How can we show helptext of a field in VF page [duplicate]

I am using fieldsets to display fields in a VF page. Is there a way to display the help text icon next to the label if there is a help text associated with the field and display the text on hover? ...
0
votes
1answer
695 views

SLDS - InputField MultiSelect PickList

I am re-styling existing VF pages. I have an inputField that is rendered as multiSelectPickList. I tried using 'slds-dueling-list', but I am not sure the code is right. There is no example code on the ...
-1
votes
1answer
532 views

Why doesn't slds card styling show default background?

My code is wrapped in an and styled with slds-card; not sure why the background is transparent. How can I get the default background styling to show? <article className="slds-card"> ...
1
vote
2answers
412 views

How to present an icon that has a background in a lightning:tab label?

This component markup: <lightning:tab aura:id="tab" title="{# 'New or Existing ' + v.tab.label }"> <aura:set attribute="label"> <lightning:icon iconName="{# v.tab.iconName ...
0
votes
1answer
1k views

apex:pageblock convert to slds

As apex:pageblock is not supported in SLDS it's suggested to use slds-panel and slds-panel_section to replace page block and pageblocksection respectively. In my existing code I use rendered property ...
2
votes
0answers
367 views

Lightning Component Testing Code Coverage

I need some help here with lightning component testing. So I'd been building lightning component test on Salesforce using Jasmine testing framework. I was wondering if anyone here successfully ...
0
votes
0answers
63 views

ReRender issue in SelectList

I am facing issue with re-rendering the Select List, based on the option selected in another select list. This is a working piece of code in normal VF tags and styling. When I changed the VF page to ...
0
votes
1answer
102 views

SLDS in Visual Force - How to render a conditional div?

I have a slds-grid that I want to display conditionaaly I tried <div class="slds-grid slds-wrap slds-gutters" rendered="{on condition true}"> doesn't work, condition is correct. Tried using '...
0
votes
2answers
395 views

SLDS input does not bind record values on saving

I have a visualforce page to create a record. I use SLDS. Problem is, when i try to save record with filled form, the inserted data is not binded with new record. note: I use a standard controller ...
3
votes
1answer
346 views

Justify text based on width of column width lightning design grid (slds)

I have a lightning grid table in which I show some data. 1 of the values has a long text. How do I adjust this according to the max of the table width. Grid: <p><b>{!opleiding....
5
votes
1answer
1k views

lightning:input checkbox label with url

I have been tying to include "url/hyperlink" within a checkbox "label" using lightning input, but to no avail. Given is what I have tried and with the results, I want "Terms and Service" part of the ...
0
votes
2answers
289 views

slds popover not working in visualforce page

I am trying to make a slds popover, but when I put the cursor on a apex:image nothings happen, this is my code: <span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="...
1
vote
1answer
235 views

validation on onClick of apex:Commandlink

I am trying to validate a checkbox is checked on click of a apex commandlink. I am using SLDS styling on the page and the problem seems to be with the SLDS checkbox. I am using the below code as ...
0
votes
2answers
562 views

How to use custom fonts in Salesforce Lightning Design system

How i can use custom fonts in Salesforce Lightning Design System. As of now i am using default font provided by SLDS. Is there any way to override default fonts on visualforce page using css/...
0
votes
2answers
1k views

Spinner is being displayed properly but not removed on being called again

I have the following component code <div style="text-align:center"> <lightning:spinner aura:id="mySpinner" class="slds-hide"/> </div> and the following js helper code ...
3
votes
2answers
948 views

How to access SLDS icons from a lightning component Javascript controller?

I am needing a switch statement, and depending on the type of file uploaded, I want to change the background of the uploader to represent the file type (pdf, doc, txt, etc...). So, <lightning:...
0
votes
0answers
254 views

Lightning Design System UI responsive on browser window resize issue

I have developed UI with using SLDS responsive framework( https://www.lightningdesignsystem.com/ ) More over in entire application I have used lightning component ex: lightning:tabset (https://...
1
vote
2answers
446 views

Custom error message not being displayed in a table cell in lightning component

I have the following piece of code <aura:iteration items="{!v.wrapAccountList}" var="arItem" indexVar="index"> <tr> <td> ...
5
votes
1answer
374 views

Any way to introduce a separator into lightning:datatable row actions?

In SLDS there is a slds-has-divider_top-space style that allows a separator to be displayed between groups of actions: and this class can be specified in e.g. a lightning:menuItem. Is there any way ...