Hot answers tagged

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
7 votes

Using SASS/SCSS with Lightning Web Components

Answering my own question with the hacky workaround I've settled with for now. Basically making a folder of the SCSS files outside of the codebase, then running a sass command where the output is the ...
user avatar
  • 181
6 votes
Accepted

renderAs PDF shows blank first page

I ended up using the following on the apex:image styleClass: position: absolute; top: 0; and it did the trick.
user avatar
  • 2,700
5 votes

How to include and use an external CDN in Lightning Web Components?

Repasting from here You cannot have direct CDN in LWC component. Download the file , create static resource and refer it in LWC component using loadScript. Create CSP Trusted Sites to google sites so ...
user avatar
5 votes

Using a non-SLDS css library with LWC

Yes, it is. You can do so by using an import with @salesforce/resource_url module. Take a look at this documentation. Basically it comes down to these few lines: import { loadStyle } from 'lightning/...
user avatar
4 votes
Accepted

Remove border-radius on <lightning:input/>

Using SLDS's input component documentation, you can easily create your custom input box: <div class="slds-form-element"> <label class="slds-form-element__label" for="text-input-id-1">...
user avatar
  • 19.3k
4 votes
Accepted

How Can I Style a Lightning Component with Bootstrap Styling?

I will recommend not to style it with bootstrap instead use lightning design system. So, that your component looks consistent with rest of the app. However, if you wan to use bootstrap use <ltng:...
user avatar
4 votes
Accepted

Is it possible to customize the look and feel of the Forward to a Friend Default Page

Other than through the usual BrandBuilder colours and logo, not really. Certain levels of Support have access to Manage to alter the Brand Tags that define much of the page design, but getting ...
user avatar
  • 7,766
3 votes
Accepted

Can we use Swipe / Touch events in LWC mobile

In LWC, you're not allowed to use innerHTML, except in some cases, and document.querySelector will have unexpected behavior. Here's the minimum modifications to make your code work: <template> ...
user avatar
  • 434k
3 votes
Accepted

Design tokens doesn't work in LWC?

EDIT 12/22/2019: keep an eye on the release notes for spring '20, they're still in preview so this could change, but looks like a fix is coming. https://releasenotes.docs.salesforce.com/en-us/...
user avatar
3 votes

FlyingSaucer library usage inside Visualforce pages

In fact, Salesforce is already using Flying Saucer. However they have not kept it up to date, so effectively you are stuck only being able to use styles and elements that existed before HTML5/CSS3. So ...
user avatar
  • 10.6k
3 votes

CSS updates in winter 18 release

You'll probably want to look at the Lightning Design System Documentation for Buttons, Button Icons, and Button Groups where the applicable CSS resides that applies to Lightning Components and Pages. ...
user avatar
  • 40.4k
3 votes
Accepted

visualforce vs HTML/CSS/JS

Visualforce gives you more of the "salesforce look and feel", but remoting tends to be at least 10 times faster for any type of page, even if you use actionRegion elements, and actionFunction/...
user avatar
  • 434k
2 votes

How to use CSS to center my Heading H1 in a vf Page

The simplest way is to put a <span> tag around your H1 tag which should center it on it's own. If it doesn't, just add the following CSS: span + H1{ text-align:center { If you center the div, ...
user avatar
  • 40.4k
2 votes
Accepted

How to change the size of circles/rectangles in progress bar css?

This rule reset the properties. Modifying here worked for me. @media all and (min-width: 800px) { ... ul.checkout-bar li:before { height: 45px; left: 40%; line-height: 45px; ...
user avatar
2 votes
Accepted

re-run a css animation in lightning web components

Browsers calculate a sort of "delta", as does Lightning, so you just need a small render delay to allow the first set of changes to finish rendering before starting more. The following works for me in ...
user avatar
  • 434k
2 votes
Accepted

Marketing Cloud Responsive Layouts Not Responsive

This has been a Known Issue on Salesforce side for quite a while, more than half a year. It affects exclusively Outlook App on the iOS and is related to the stacked columns. The only workaround as ...
user avatar
  • 5,372
2 votes
Accepted

Dynamically change color of text/numbers in LWC?

I found a solution for my requirement here. I directly returned the this CSS line color:variableName from Apex class itself. I stored this value in a variable in JS, and then used that variable in ...
user avatar
  • 750
2 votes

Dynamically change color of text/numbers in LWC?

You can use the JavaScript getters to compute the css value. But, as you have the elements showing in a loop, I would suggest you create a child component to show the details and have getters ...
user avatar
2 votes

Lightning Web Component That Allows Text Input and Dropdown

You likely need a typeahead or text lookup. There are a lot of components built by the people. It won't look exactly as drop-down. If you want to build that from scratch then you can use the lightning ...
user avatar
  • 7,683
1 vote

How to make a CSS file used in LWC cross browser compatible?

You can use a tool like this which will tell you if your CSS is compatible with each browser and the reason why it is not.
user avatar
  • 398
1 vote

Design tokens doesn't work in LWC?

Salesforce finally adding support for LWC design attributes in Spring'20
user avatar
  • 4,117
1 vote
Accepted

dir="rtl" and dir="ltr" is not working on Android 4.4, 5.1 and 6.0 Email

You may be best giving some example of your code, but for reference in HTML5, the dir attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily ...
user avatar
  • 2,800
1 vote

Landingpage CSS

For landing pages best practice is to import your CSS as content. External CSS works fine for email but glitchy on landing pages. To get the link for your uploaded CSS file, navigate to your content ...
user avatar
  • 6,459
1 vote
Accepted

CSS for VisualForce Apex tabPanel tweaking

.rich-tabhdr-side-cell {border-top:none;} .rich-tabhdr-side-border {background-image:none;} That should do it.
user avatar
  • 9,101
1 vote

Split text in two columns in a PDF?

You've tagged your question with CSS3. The Flying Saucer Render engine used by Salesforce to render PDF's doesn't support CSS3. Instead, it only supports HTML 4.1 and CSS 2.1. Your best bet for what ...
user avatar
  • 40.4k
1 vote
Accepted

How to use CSS to center my Heading H1 in a vf Page

text-align: center; will make the text to be centered from their margins. But usually the margins are well around the text so you won't see a big difference. So you should make the whole div or p ...
user avatar
1 vote
Accepted

tr:hover{} this code print on page but i want to work that when my mouse point on a particular tr background color will apply

Wrap your style inside <style> tag <style> tr:hover{ background-color: #87cefa; cursor: pointer; height: 30px; } </style> I believe you ...
user avatar
1 vote
Accepted

Border not showing for Button Group with hidden Button

The assumed approach appears to be to disable rather than hide as illustrated in the Button Groups documentation. (Bootstrap button groups also don't support the hide approach.) When disabled is ...
user avatar
  • 130k

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