Questions tagged [css]

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.

Filter by
Sorted by
Tagged with
-2
votes
0answers
25 views

Lightning web table conditional colors

If i want to color the cells of a table on content value which is the most optimized way to do it? If "dog" background-color should be blue if "cat" background-color should be red. <table> ...
1
vote
0answers
26 views

using custom styling in lwc for lightning components [duplicate]

I'm trying to follow this document https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/example to create an accordion section that resembles a page layout. This is the ...
0
votes
0answers
22 views

Replacing CSS Class in Lightning Web Component [duplicate]

On loading of the LWC , I just want to replace the css class with the other on first load. I have tried to use : var cssVal =this.template.querySelectorAll('slds-accordion__section slds-is-open'); ...
0
votes
1answer
41 views

Modal content not displaying correctly

I am creating a lightning component that pops up from a button on Opportunity. In this lightning component I am using multiple recordEditForm tags that are just outside tab tags. When setting the ...
3
votes
1answer
50 views

Passing height and other style attributes of a component from app builder to LWC

I am trying to implement functionality where I can change the background-color, height and other parameters of a lightning web component. However, I am not able to see whether it reflected in the ...
0
votes
1answer
16 views

Why is my Visualforce PDF footer just off-center?

I have a Visualforce PDF page with a footer section, but this isn't centered - it is just off center and I can't figure out why. What do I need to do to get it centered? My CSS classes contain this: ...
0
votes
1answer
24 views

How to use css costomproperties in lightning component

I need to use css costomproperties in lightning Aura component like so :colors{--Color1:color: #95ccff;} .line{color:var(--Color1);} I tried to use it in 'STYLE' at component bundle, but I got ...
0
votes
0answers
29 views

How to remove app.css from every page?

I am trying to remove app.css from every page of our Salesforce website because we are completely overriding it with our own theme stylesheet. We want to remove app.css to improve the front end ...
0
votes
0answers
16 views

How do I center links in a Community page's Tile Menu?

I have a Community Page that has a Tile Menu, which holds 3 links that are displayed as images. For some reason, they're left-aligned, so the middle of the 3 images is to the left of the middle of the ...
0
votes
1answer
41 views

Set CSS Selector of child in Javascript

I have the following CSS Selector in an aura component: .THIS .slds-grid:last-child .slds-col:nth-last-child(1):nth-child(odd) lightning-formatted-text{ width: calc(50% - 2rem); } .THIS .slds-...
0
votes
0answers
11 views

Community - Static Resource Image Not Loaded [duplicate]

I created a page within the customer community and I entered several lightning components. Each component has its own css. For example .THIS .py-icon--tickets { background-image: url("/sfsites/c/...
1
vote
1answer
72 views

Need Help with custom types in Lightning DataTable - LWC

Here is the playground link to the code - https://developer.salesforce.com/docs/component-library/tools/playground/l_0ieW-Sm/17/edit My use case is to show popover on hover for a specific column in a ...
1
vote
1answer
44 views

Decrease icon size in lwc

i am using lightning-icon and i want to decrease the size of it. <lightning-icon icon-name="action:approval" size="xx-small"></lightning-icon> The smallest size is xx-small, and i can't ...
3
votes
1answer
31 views

applying styles to several html templates with single css file

I have we component lets say called orderFlow. Inside there is obviously orderFlow.html template file, orderFlow.js and also I have added orderFlow.css file. Additionally I have created few html ...
0
votes
1answer
23 views

adding extra inline css attributes with ContentImageByID

I have the following code which works fine, however the image loads at its original width at 540px. I would like to change the width of the image. I've tried adding style to <td> but it doesn't ...
2
votes
0answers
47 views

LWC: CSS animations from different components colliding with each other

I just noticed that two of my Lightning Web Components' animations are colliding with each other. Fragment of Component #1: HTML: <template> <span class="my-element" if:true={showModal}...
1
vote
1answer
65 views

Variant label-hidden with Lightning Input Field and LWC not hiding HelpText Icon? [duplicate]

I've seen various posts about how you cab hide stray elements like this with aura components, and I think the answer with LWC is always 'shadow-dom' as described here but is there really no way to ...
0
votes
1answer
38 views

lightning-tab align align center

I have only two tabs in lightning-tabset. And its align left. I need to have it in center. I tried padding-left: 200px; on ".slds-tabs" but nothing seems to be working. It works when i change through ...
0
votes
1answer
32 views

querySelector on inner template element

I'm trying to reach a lightning icon in my component and it is not working. It is wrapped with a <template if:true={condition}> <template> <template if:true={condition0}> <...
0
votes
1answer
20 views

How to to get conditional rendering inside an iterator which is inside a scroller?

`If ui:scrollerWrapper is uncommented, the class in card element does not work. <!-- <ui:scrollerWrapper class="scroll" >--> <aura:iteration items="{!v.commentsData}" ...
1
vote
1answer
96 views

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

I have a div and I want to assign one css class statically and one dynamically. Something like this: <div class="my-class + {dynamicClass}"></div> However that is not working and I am ...
0
votes
1answer
43 views

Position fixed problem lightning

I have a custom lightning component on a record detail page. The component has a message which i want the user to be alerted. Everything works great but now i want the banner to scroll also if a user ...
0
votes
2answers
16 views

How to target the css for inputfields

I have a lightning component where the fonts a returning white which makes it difficult to read. I read some solutions deinstalling a calendar or reinstalling chrome which did not work in my case so I ...
1
vote
2answers
39 views

Modifying the css of a lightning page?

Is it possible to modify the css of a standard lightning page for a sf object? What I was thinking of is insert a custom component but would that component be able to find an element on the rest of ...
0
votes
1answer
25 views

Remove list view link for community members on record list page

We are using a "Full" record list in a Salesforce Community and would still like to be able to disable the drop down menu for changing the list view. There is only one list view this group should be ...
0
votes
2answers
36 views

Help on applying CSS attribute 'style' into <apex:outputText>

I am trying to apply a style in the <apex:outputText> but it doesn't work. Below is the code: <apex:outputText value="Please refer this link for more information <a href =https://www....
0
votes
0answers
21 views

How do I do VF component from VF page?

This part of code I want to use in the future, so I'm trying to make a component with the part: <apex:page standardController="Contact" extensions="ContactController" renderAs="pdf" applyHtmlTag="...
0
votes
1answer
22 views

Iterating through a VisualForce page to manipulate CSS using document.getElementByClassName(“foo”)

I am adding CSS classes to numerous <apex:inputFields>, that i am passing to the HTML <input> element using html-class="foo". Then i am iterating through them like this to change other ...
0
votes
0answers
27 views

Align DIV bottom of the next page in pdf file

I created pdf file using visualforce renderAs. In visualforce I have a table tr in apex:repeat and below that table one DIV tag. This div tag appears at bottom of the page when there is content only ...
2
votes
0answers
79 views

Visualforce page embeded in page layout is not coming with 100% width in lighting compact density

I have a visualforce page embeded in pagelayout and page is showing the 100% width for comfy but for compact it is not showing 100% width. Can any one tell me how to fix this issue?
0
votes
0answers
33 views

Bootstrap email template

I made an html template for my email using boostrap 4 css. I would like to know where to include the .css (of 7000 lines) in order for my html page to appear properly My : <link rel=“stylesheet” ...
1
vote
1answer
90 views

Is there a away to apply a CSS static resource to just the LWC?

I have a LWC that is loading a bootstrap stylesheet and a custom stylesheet CSS static resources using the loadStyle() method but when I load them it is applying the style to the entire page that LWC ...
0
votes
0answers
35 views

LWC - Replace Lightning-input of type file with a icon [duplicate]

<div> <lightning-button-icon icon-name="utility:attach" type="file"></lightning-button-icon> <lightning-input onchange={insertFiles} type="file"></lightning-input> &...
0
votes
1answer
57 views

Use Ampscript to change font style based on data extension

I would like to set the font color to green, black or red based on a data extension. The data extension passes a text string such as: "Status is active." "Status will expire soon." "Status is ...
0
votes
1answer
10 views

Variable vertical gaps in Visualforce radio buttons

Goal: Make this radio button: o Choice 1 o Choice 2 o Choice 3 o Choice 4 o Choice 5 Look like this (note gaps) o Choice 1 o Choice 2 o Choice 3 o Choice 4 o Choice 5 Given radio button VF ...
4
votes
1answer
198 views

Using SASS/SCSS with Lightning Web Components

We are building Lightning Web Components and styling each one using the CSS file within each component folder. This is starting to become long and out of control. I understand that one could upload a ...
1
vote
1answer
105 views

Using a non-SLDS css library with LWC

We are building a Lightning Web Component using some of the native lightning components. However, we'd like to style it differently. Is it possible to import and apply a non-slds css library to LWC? ...
0
votes
1answer
33 views

Creating a dynamic email template

I have a batch which I use to send emails to contacts. Every contact should have a different template - So I Created a body and subject in my apex class which every contact will have his unique body- ...
0
votes
1answer
32 views

Unable to avoid the page breaking of a list in visualforce PDF

I have to do a visualforce that render a list of list of quotelineitem, that can be spited on more page cause the visualforce is seted to renderAs="pdf". To reach my goal i decide to use an apex ...
0
votes
1answer
41 views

How to disable the blue border around all the element after selecting a time in lightning:input of type datetime?

I have a lightning:input of type datetime When I select a date it's ok, but when I select a time, after selecting during this "click" it's showing like a blue border around all the element. I know ...
2
votes
1answer
95 views

How to hide page header in lightning component

I want to hide a page header from an appHomeTemplate I have looked at several similar questions but none of them give an answer. I have used .THIS.slds-page-header { display: none; } in my page ...
0
votes
0answers
14 views

Is it possible to customise the design of the Connect Salesforce Authenticator page?

I have Two Factor Authentication enabled for a Customer Community Login Users profile, which means after using a branded login screen the user gets this: Is it possible to customise the background ...
0
votes
0answers
28 views

Add lightning rich text toolbar buttons from css

How can I use css to add toolbar buttons to the lightning:inputRichText editor? When I used css to modify the height of the editor window, I lost the color button from the toolbar. I was able to get ...
0
votes
0answers
19 views

Customize Salesforce Developer Console CSS stylebot

Is there a default css style to change the highlighting color in the SF developer console? I use CodeMirror-matchingtag, VARIABLE_DECLARATION and a few others but I would like to change the color when ...
0
votes
0answers
47 views

Style page-break-inside: avoid not being applied

Environment: Salesforce CPQ Object: Template Content The goal is to apply the page-break-inside style for each section to force each of those sections on a page without breaking. What I have in my ...
0
votes
0answers
10 views

unable to fetch value from igGrid

Can anyone please help me in below JS code snippet, which is not rendering value from the record. i could be able to see the value for the first alert, but when it throws error while executing second ...
1
vote
2answers
130 views

How to adjust min-height of Salesforce Lightning input rich text component on load

I would like to change the min-height of a Salesforce Lightning rich text component. The original code (old vendor) used a long text area and Aura. I changed it to rich text area using lightning:...
1
vote
0answers
33 views

How can I get custom CSS to work with LiveAgent?

I need to add a custom message to the waiting page for Live Agent. I've designed a basic VisualForce page to use for testing. This page includes custom CSS. Well, really it's not custom CSS. I found ...
1
vote
1answer
518 views

LWC - CSS color fill for lightning:icon not working

I'm trying to color the utility "up" and "down" arrows that SLDS provides. I've confirmed that my CSS selector is correctly selecting the SVG icon in my browser console $$('.down svg'), but the fill ...
1
vote
2answers
79 views

slds-gutters not adding spacing between div's

The slds-gutters class does not seem to add spacing between the div's. What is the reason for this? Essentially I could add padding, but I would like to understand why there is no spacing between the ...