New answers tagged css
1
Try setting it at the "html" level - does that work?
body, html {
font-family: "Colfax", Arial, sans-serif;
}
1
The below code work for me, hope it will be useful for you:
<style>
@font-face{
font-family: 'samplefont';
src: url("{!URLFOR($Resource.staticResourceName, '/Path/filename.eot')}"); /* IE9*/
src: url("{!URLFOR($Resource.staticResourceName, '/Path/filename.eot?#iefix')}") format('embedded-opentype'), /* IE6-IE8 */
url("{!URLFOR($Resource....
0
After battling with this for a while, I also had to make some minor tweaks to get a custom font to work. My src string looked like the following:
src: url(data:application/font-ttf;charset=utf-8;base64,%%=v(@FontName)=%%) format('truetype');
So the start of my Cloud Page HTML looks like:
<html>
<head>
%%[SET @customFont ="...
0
I found the cause! The original VF Page used SF Api version 40 and the new one, version 47.
I changed the new page to Api version 40, and now it looks the same.
Now all I have to do now is figure out how to make it look the same with Api 47 - I don't want it stuck with an Api from 2017!
1
I found the answer after looking at full css. This div has different classes such as x-small, small, medium etc. where we can set the height accordingly.
<div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar" ng-if="stepsCnt.length > 1">
<span class="slds-progress-...
1
Ok, I figured it out - funny how asking a question often leads you to the answer. The trick was to override the SLDS css with something more specific, e.g.
c-setup-assistant-item>li.slds-setup-assistant__item {
border-bottom: 1px #dddbda solid!important;
padding: 2rem 0!important;
}
c-setup-assistant-item:first-child>li.slds-setup-...
2
Thanks to Wei Ni's answer (do upvote that), I think I now better understand what is going on.
I have been adding this CSS to my component:
.scaled-down button {
transform: scale(0.75);
}
which outputs this into the resulting HTML page:
<style type="text/css">
.scaled-down[cvnp-claims_claims] button[cvnp-claims_claims] {
transform:scale(.75)
...
2
I haven't tried it myself, but if this can get background color working, it should work for the size as well.
https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/
Basically, what it does is adding class attribute as part of cell attributes then manually assign class to it when define data.
{label: ‘Diet Type’, fieldName: ‘diet’, type: ‘text’, ...
0
You can use <aura:html tag="style">.
In you case:
<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" >
<div class="demo-only" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="...
0
Appearantly it all has to do with the templates body 1.15 line height.
When you set this to Single all of the described errors disappear. But i am still totally puzzled why inline styles with line height set to 100% are not changing anything. I am still investigating this issue, because i want to make sure that i can have the template set to 1.15 line ...
0
We had similar issues with Outlook as well. This is what was advised by the Salesforce support:
<style>
/* Remove space around the email design. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* Stop Outlook resizing small text. */
* {
...
0
Try adding the .outlookfix class all tags.
<!--[if gte mso 9]>
<style>
.outlookfix{font-size: 0%;line-height: 0;}
</style>
<![endif]-->
0
Try to add "slds-align_absolute-center"right afer the slds-input. If it doesn't work to add a div in top:
<div class="slds-align_absolute-center">
<input lightning-input ....... />
</div>
Top 50 recent answers are included
