Hot answers tagged

36 votes
Accepted

Styling lightning:combobox drop down to not hide inside modal and extend modal length?

Ugh, I finally found the culprit. The drop down was absolute positioned, but applying a higher z-index was not doing anything. It turns out it was the overflow options of the slds-modal__container. ...
user avatar
  • 2,359
32 votes

Target inner elements of standard Lightning Web Components with CSS

LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree. That being said, there is the on-going ::part and ::theme proposal that would ...
user avatar
  • 2,297
32 votes

Target inner elements of standard Lightning Web Components with CSS

We ran into the same problem. I think it is something that Salesforce should definitely address as it is the biggest limitation of LWC compared to Aura components that we have encountered so far. ...
user avatar
  • 917
21 votes

Why do we still need to hack the Sidebar? Usecases - Workarounds - Alternatives

Use Case: Embedded Visualforce Page on Layout My top1 is to embed Visualforce Pages on standard layouts with a dynamic height of 100% of it's content instead of a fixed height in px - which can not ...
user avatar
  • 33.6k
16 votes

Set CSS class dynamically in Lightning web component

The documentation covers this explicitly: To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the ...
user avatar
14 votes

Why do we still need to hack the Sidebar? Usecases - Workarounds - Alternatives

Use Case: Wide Input Controls for Edit and Inline-Edit By default the inputs on record edit pages are very small. This comes because there is no with set and the browser comes up with a default width ...
user avatar
  • 33.6k
14 votes
Accepted

Remove Last Page from the PDF

I've handled this directly as part of my Apex code by using some CSS tricks. Try this out. <apex:variable var="cnt" value="{!0}" /> <apex:repeat value="{!cases}" var="cse"> <...
user avatar
14 votes

Dynamically Adding/Removing CSS in Nested Div

When styling lightning components, there needs to be a space between .THIS and the CSS classs for non-top-level elements. If you want the class toggle to work for both situations, you could add the ...
user avatar
  • 12.2k
14 votes
Accepted

Refer static resource in css of lightning component

you can certainly refer the static resource contents in your app/component.css using /resource/resource_name format. Here's a sample app which I tried in my org to set div's background-image property ...
user avatar
  • 10.1k
14 votes

Target inner elements of standard Lightning Web Components with CSS

The workaround that I have been using is to create a <style> tag and add it to the dom. This is somewhat dangerous if not done correctly because it can affect the entire css of the page ...
user avatar
14 votes
Accepted

CSS animation in LWC not working

Was able to sort out a workaround to get this functioning. By importing a stylesheet with the keyframes in it, we can avoid the current impact of the compiler. The 'third party library' examples in ...
user avatar
13 votes
Accepted

My Header and Footer overlaps with the content in a PDF Visualforce Page

I think the main issues is that you should put your margin measurements in the @page element and remove them from the content div. For readability, i've put this all in one VF page: <apex:page ...
user avatar
11 votes
Accepted

Where to store css when developing in salesforce?

There is no 'proper' way to do this, but typically the resources will end up in a static resource so that's a good way to go, although it can be rather painful to constantly zip up files and upload ...
user avatar
  • 24.7k
11 votes

Word Break - Lightning

I had a similar requirement and this worked for me: Visualforce/Lightning: <div class="no-text-overflow"> loooooooooooooooooooooooooooooooooooooooooooooooooooooooong </div> CSS: ....
user avatar
  • 931
11 votes
Accepted

Target inner elements of standard Lightning Web Components with CSS

As of Winter `21, you can use styling hooks (beta): https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_custom_properties
user avatar
11 votes
Accepted

CSS file upload and store in Marketing Cloud

Within your Cloud Page collection, you can create a Code Resource: After you fill out the name of the code resource, you can select the type, which in your case will be CSS: You will now be able to ...
user avatar
10 votes

Refer static resource in css of lightning component

I have tried the answer by Praveen and when viewing the CSS in a browsers developer mode the css url() appears exactly as typed, ie. it's not converting the path '/resource/loading' to the static ...
user avatar
9 votes
Accepted

Position elements side by side within a single pageBlockSection column

This makes the two fields the "value" part of the apex:pageBlockSectionItem and presents the fields side by side: <apex:page standardController="Contact"> <apex:form> <apex:pageBlock&...
user avatar
  • 130k
9 votes

CSS updates in winter 18 release

When Lightning was introduced, it had a lot of styles which were undocumented, primarily as placeholders for what later would become SLDS. Anything not starting with slds was never meant to be a ...
user avatar
  • 434k
9 votes
Accepted

One column/two column form responsive layout using SLDS that preserves field ordering?

here is a visualforce example: <apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false"> <head> <apex:slds /> <style> .custom-container div { ...
user avatar
  • 17.7k
9 votes
Accepted

Add spinner text along with spinner in lightning component

There is a spinner component already in lightning. You can use this then with a little css add your text in the style. Component <aura:if isTrue="{!v.spinner}"> <lightning:spinner class=...
user avatar
9 votes
Accepted

Changing colors of lightning-button

Based on my understanding of the documentation, your CSS cannot reach into the child component of the lightning-button component: Styles defined in a component’s style sheet are scoped to the ...
user avatar
  • 19.3k
9 votes

CSS animation in LWC not working

You have stumbled upon a bug in Lightning Web Components. When you write your CSS in the CSS file, Salesforce tries to do some optimisations to it like minifying it, adding attribute selectors (...
user avatar
9 votes
Accepted

LWC: Can I have an expression and a string as a class combination?

No, it's not possible. You can only use getters for specifying a value, such as: <div class={classes}> ... get classes() { return `my-class ${this.dynamicClass}`; } You can read more about ...
user avatar
  • 434k
9 votes
Accepted

How can i use var() in css in LWC?

you can define custom properties either in components to make them local or load them from StaticResource, if they are not already present on the page. Salesforce by default loads its' properties in :...
user avatar
  • 4,117
8 votes

Why do we still need to hack the Sidebar? Usecases - Workarounds - Alternatives

Here's a few more use cases for having to go to hackerama land: Run Assignment Rules Box on Page layouts: This is located at the bottom of the "Edit Page" layout, it cannot be moved, it has little if ...
user avatar
  • 179
8 votes
Accepted

Background color for Pageblock title

I don't see a Salesforce supported way of doing this. But for a little bit hacking into this you can use the below css code which is working for me: body .bPageBlock .pbHeader { background-color:...
user avatar
  • 12.7k
8 votes

Guidance on styling existing Visualforce pages adequately in Lightning Experience without major rework

So here is my two cents Note Per comments this does not seem to completely answer the question as OP is looking to keep classic look while providing a look that also appears well under Lightning ...
user avatar
  • 53.1k
8 votes

Any 3rd party SLDS Stencil CSS available?

Thanks for sharing this! I'm using your solution but made some changes, so it will look more like the lightning stencils. Just wanted to contribute something back :) Btw. there are still no updates on ...
user avatar
  • 6,140
8 votes
Accepted

How to style lightning:input of type file as lightning:button?

Here's the HTML rendered by the lightning input file: <div data-reactroot="" class="slds-form-element"> <span class="slds-form-element__label" id="file-selector-id">Attachment</span&...
user avatar
  • 7,218

Only top scored, non community-wiki answers of a minimum length are eligible