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. ...
- 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 ...
- 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.
...
- 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 ...
- 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 ...
- 781
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 ...
- 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">
<...
- 15.5k
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 ...
- 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 ...
- 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 ...
- 903
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 ...
- 1,053
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 ...
- 16.3k
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 ...
- 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:
....
- 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
- 516
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 ...
- 17k
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 ...
- 117
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&...
- 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 ...
- 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 {
...
- 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=...
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 ...
- 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 (...
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 ...
- 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 :...
- 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 ...
- 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:...
- 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 ...
- 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 ...
- 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&...
- 7,218
Only top scored, non community-wiki answers of a minimum length are eligible