Skip to main content

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
0 votes
1 answer
595 views

Salersforce community theme: List-style CSS not working

I am trying to implenent custom CSS into Salesforce communities. However, I've encountered an issue where list-style: none is not working, causing bullets to appear on a navbar. This does not happen ...
Claire's user avatar
  • 19
0 votes
2 answers
2k views

Responsive header with lightning web component

I have this code, it is a header with LWC, divide into three parts, but the problem I have that my display is not responsive, each part points to the other The part 2 and 2 overlap the part 1. How can ...
Salesforce Junior Dev's user avatar
4 votes
2 answers
2k views

How to set consistent styling across many LWCs using styling hooks?

This Style Components Using Lightning Design System Styling Hooks documentation illustrates how to set custom properties on an individual custom LWC to change the styling: /* myBaseButton.css */ :host ...
Keith C's user avatar
  • 136k
0 votes
2 answers
1k views

Want to increase lwc icon size in in specific pixels. so what i did is added style="size:50px" this is not worked for me

This is the code. <lightning-button-icon style="size:50px" icon-name="utility:settings" variant="bare" alternative-text="Settings" icon-class="slds-m-...
Vinayak Karande's user avatar
-3 votes
1 answer
127 views

Rendered LWC should not contain extra attribute in rendered element

I defined some styles like this .tableRow { padding: 8px; } But, when it is rendered some extra attribute is added to this class like this .tableRow[c-test_xxxxxxxxxxx_xxxxx] { } Can we prevent the ...
Jaya krishna's user avatar
0 votes
1 answer
2k views

quick action combobox overflow

I have a quick action that has two combobox and one textarea. The combobox opens behind the quick action footer. How can I handle this in LWC? This is the HTML code: <template> <...
barucco's user avatar
  • 39
0 votes
1 answer
2k views

Lightning component modal window with fixed size and proper closing buttons

I want to use a salesforce modal window using a lightning component, fixing its size to 90% width AND height of the screen to display larger content (a pdf preview). The standard modal component seems ...
HeXor's user avatar
  • 287
2 votes
1 answer
918 views

Remove box-shadow on Active Cell in datatable

I've been pouring over slds styling hook docs and datatable docs and I cannot figure out how to remove this box shadow when the cell has focus. I know for sure it's box shadow because when I uncheck ...
chinnc's user avatar
  • 21
0 votes
1 answer
1k views

Extra space at bottom of table when adding sticky header

I have a table of data using the < table> element inside a < div> element. The table needs to scroll vertically as needed and the header is to remain in place. Nothing too fancy! Looking ...
Tom Ansley's user avatar
1 vote
1 answer
2k views

align command buttons to center in Visualforce page

Command buttons have aligned to Right ,how to recenter them without using CSS? <apex:page standardController="Contact" lightningStylesheets="true" extensions="...
Purushothama Puru's user avatar
0 votes
1 answer
303 views

How to separate these elements in html/css

In my work project we need to leave a similar space between these buttons. They only overlap in the process of becoming responsive. My superior and I have tried many forms of css and slds stuff and ...
DDCruz's user avatar
  • 21
0 votes
1 answer
142 views

How to standardize the size of tables generated by a repeat?

I'm setting up this table, but the fields that will compose the table are dynamic, and their sizes vary, does anyone have any idea how I can make the tables standardized? Also, the bottom element is ...
Souza's user avatar
  • 305
0 votes
3 answers
189 views

SLDS Source Code

I want to download the whole SLDS and inspect the CSS code on which it is based. For example: <div class="slds-align_absolute-center" style="height:5rem">This content will be ...
DevelBase2's user avatar
1 vote
1 answer
636 views

D3 javscript: How to add a div in aura component?

I am trying to create a map hierarchy visual aura component using D3 library and d3 tree and d3.hierachy methods. The original code had circles in place for the nodes, but I want to append a div so ...
Benton's user avatar
  • 51
0 votes
1 answer
4k views

Opening Lightning Combobox options upwards

Since my dropdown is at the bottom of the page, if we try to select a value, it adds extra scrolling as select options open downwards. Can we open it upwards instead of downwards, either using ...
Pankaj Andhale's user avatar
1 vote
1 answer
3k views

How to remove spaces between Lightning-card and border

I want to remove space between "inner_card" and "my-card-child". I tried it with margin and padding between those card and div tag. but i'm not getting solution for this. I wan to ...
user avatar
3 votes
0 answers
1k views

Media Queries in LWC Not Loading

I have a bunch of LWCs that are styled with a CSS grid. It seems like the media queries have stopped loading. I am not sure how long this may be been the case. Just recently had a BA test something ...
Brooks Johnson's user avatar
1 vote
1 answer
1k views

LWC Change iteration to color even indexes

I am trying to find how to change the row color of even rows so it alternates between odd and even indexes in my list of divs so odd would be a background of say white and the evens would be a ...
Bill Woodson's user avatar
3 votes
1 answer
2k views

"No TOKEN named force:base.varFontSize7 found" design token build error started today

We have a LWC that has not changed for months that includes a reference to the $font-size-7 design token: .notes-output__span { min-height: calc(var(--lwc-varFontSize7,1.25rem) + 1px); } and ...
Keith C's user avatar
  • 136k
0 votes
1 answer
136 views

change the background color depending on the prefix

I want to change the background color depending on the prefix....the command I'm trying to use has given a syntax error, where am I going wrong? Or is this idea not possible <body style="{!if(!...
Souza's user avatar
  • 305
0 votes
1 answer
948 views

blob topdf as attachment PDF apex no renders background color

I'm creating an HTML string that I put in a in blob.toPDF to send PDFs as attachments public static Messaging.EmailFileAttachment attachmentBuilder(String fileName, string attachEmailInHTML){ ...
arnaud's user avatar
  • 106
1 vote
1 answer
2k views

Alignment of lightning-datatable headers

I'm attempting to right-align the contents and header values of a lightning-datatable in an LWC. I can get the content to align correctly by adding cell-attributes but the column header remains left-...
Salesf0rce's user avatar
0 votes
0 answers
471 views

Hide filter option on report side in experience cloud

we are setting up the experience cloud and want to give some reports to our external users. However what we would like to avoid is them playing around with filters. Is it possible to use CSS to hide ...
Jan Tonnet's user avatar
0 votes
1 answer
274 views

Getting image overlap with border in Visualforce page. How to avoid it?

As you can see the blue color header image is overlapping with my border on the top of the page both sides how to avoid it. Here is the style i have used- <style> html{ border: 3px solid black;...
Varun's user avatar
  • 1
1 vote
1 answer
1k views

CSS styling hooks not applying for lightning-badge in LWC

I have the below lightning-badge component where I am trying to change the background color. The background color is not changing. What could be the issue? HTML: <lightning-badge label={product....
Krishnamurthy's user avatar
-3 votes
1 answer
682 views

Add Chart to our LWC [closed]

i want to get something just like this , is it possible with LWC , with the possibility that the arrow change the position in depend of the condition that i will make in my JS , should i just use the ...
mary snh's user avatar
0 votes
1 answer
603 views

<apex:outputText Not considering css being applied?

i have a visualforce page where i need to display some rich text fields, and i found some CSS that makes the font resize based on the display widht of the device. This works perfectly with a normal ...
Brian23Gt's user avatar
  • 119
1 vote
1 answer
2k views

need to display Icon near to field label in LWC for Combobox

I have t create one icon and need to show near to field name for combobox in modal window below is my code <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-...
santu's user avatar
  • 13
1 vote
1 answer
999 views

Hello, does anyone know how to make the custom email template respected by outlook?

I'm developing a custom email template in the visualforce component, but outlook opens this email all unconfigured, the impression I get is that it ignores the css. I did google searches, I'm using ...
Souza's user avatar
  • 305
0 votes
1 answer
330 views

How i can convert this toggle Aura into LWC

I am not able to convert Controller in LWC JS below is my code to show toggle or helptext Aura Component <aura:component > <div class="slds-form-element"> <div class="...
santu's user avatar
  • 13
-1 votes
1 answer
3k views

how to align combo box and help text near in LWC

I have one combobox in popup and i am adding one icon near to combobox field but its not alligning correctly <div class="slds-modal__content slds-p-around_medium" id="modal-content-...
shantu's user avatar
  • 1
0 votes
1 answer
11k views

Change the font and font weight for lightning-output-field

How do I change the font size, font weight of the text from lightning-output-field ? <lightning-output-field class="outputFont" field-name="Protocol__c" data-id="...
Rahul Allada's user avatar
0 votes
0 answers
720 views

Arrow in Lightning-Accordion getting missed

I have used lightning-accordion in an LWC component where the arrow mark is getting missed. The below is present in the LWC documentation: LWC Dcoumentation for lightning-accordion This is the ...
Rahul Allada's user avatar
1 vote
1 answer
6k views

CSS in LWC - lightning-combobox box to be curved (border-radius)

I want the lightning-combobox input box to be curved(border-radius: 18px). My research and attempts: I tried CSS for lightning-input as: .slds-modal input[type="text"]{ border-radius: ...
Rahul Allada's user avatar
0 votes
1 answer
27 views

use dynamique CSS style

I have a question I have in my HTML code three different : <div> </div> -the first contains an image -the second calls for a template that contains two or more fields -the third contains ...
New Salesforce Developer's user avatar
1 vote
1 answer
2k views

change lightning card background color depending upon field value

i want to change the background of the lightning CARD on the condition ,that when units.Available__c='NO' the card background should be red and when units.Available__c='yes' the card background should ...
user13956399's user avatar
0 votes
1 answer
1k views

Refer static resource of CSS in Lighting component

I have upload one CSS file in static resource may I know how can we refer it in Lightning Component ?? File Name uploaded as static Resource- bootstrap.css Static Resource Name-CssFile Also I have ...
user105921's user avatar
0 votes
0 answers
2k views

Adding css/js code resources into a Marketing Cloud Landing Page (Preference Center)

I want to start by saying I am very new to html, css, and js. So this may seem like a stupid questions. After I upload my CSS file upload into Marketing Cloud using the code resource, I have added the ...
LGW's user avatar
  • 1
1 vote
0 answers
862 views

Visualforce PDF rendering sans-serif font with bold elements in same section not working

I have a Visualforce page with a sans-serif font: <apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false" standardStylesheets="...
Andy Ray's user avatar
  • 1,468
1 vote
2 answers
1k views

change color of a lightning-vertical-navigation-item-icon

I am building an lwc menu and have a <lightning-vertical-navigation-item-icon label="Sessions" name="sessions" icon-name="utility:event" class="myIcon&...
snack overflow's user avatar
1 vote
1 answer
2k views

change button icon filling color on row action click in LWC datatable

I have this below lwc data-table in which i have a column with slds icon. these icons are button icons which are clickable . On the icon button click i am calling callRowAction function in which i am ...
sfdc_to_learn's user avatar
2 votes
4 answers
7k views

How to color the utility icons in lightning datatable in LWC?

I have the below data table where I have two icons. I want to change the color to blue instead of grey. The variant property is not helpful. How do I do that? HTML: <div class="myTable"&...
Krishnamurthy's user avatar
0 votes
1 answer
1k views

How to set Header and Footer in Word document from VF page [closed]

I am trying to get a word document from the VF page. Now I am able to get the content and images from the VF page but struggling with the header and footer . I will show the code that I am using for ...
NewBaySales's user avatar
0 votes
1 answer
1k views

How to remove this huge distance between label and input in LWC?

How to remove this huge distance between label and input in LWC. I didn't use custom styles, only from the salesforce lightning design system. Here's my code from the HTML file: <div> &...
Pavel Kravets's user avatar
0 votes
1 answer
334 views

Is it possible to set width of global actions list

we would like to widen the list that contains global actions. As you can see, we have an action that has a longer name than the element. We are planning also to add several other. Is it possible to ...
yakee-niyakee's user avatar
0 votes
2 answers
1k views

placing button menu in lightning-tile lwc

I am trying to create a tile which will iterate records. I am trying to place the button menu exactly opposite to "Salesforce UX" towards right corner. I am unable to it. Below is my code. ...
sfdc_to_learn's user avatar
0 votes
2 answers
571 views

Is it possible to override the CSS of base Lightning web components like "Highlight Panel"

I'm trying to figure out a way to change the CSS of LWCs that Salesforce provides in the Lightning App Builder, specifically the "Highlight Panel" but I'm unable to figure out how exactly to ...
Kaltag's user avatar
  • 1
0 votes
1 answer
2k views

how to remove or customize the header of lightning-card in LWC?

I want to add a dark blue colored header for lightning-card lwc, when i try to use a div tag at the top and color it blue there is a blank white space above it. Is there any way to remove this header ...
Hemanth kakarla's user avatar
0 votes
0 answers
972 views

How to display the background picture on full size in LWC component

Like the following displayed, every background picture in the lwc tile component is not fully displayed, the CSS style is as this: .tile { width: 60%; height: 150px; padding: 2px !...
alphahunters's user avatar
0 votes
1 answer
4k views

How to add fields side-by-side in LWC (CSS)

I have an HTML code where I want the place the fields side-by-side. Whereas, now it is getting stacked horizontally. <lightning-card key={Treatment}> <p key={Treatment}><b class=&...
Rahul Allada's user avatar

1
3 4
5
6 7
24