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
0 answers
102 views

Aligning cards with list of path elements in custom Kanban component (Aura)

I'm having some problems with an aura component displaying a custom Kanban view. I have been able to get the actual logic to work, however, I'm having some trouble with the actual styling/layout of ...
Erik H's user avatar
  • 1
0 votes
1 answer
1k views

Override the style (color)of Lightning-button-icon on bare variant in LWC

Good evening, As the title say i'm trying to override the the icon style (color) of Lightning-button-icon on bare variant in LWC, as per the documentation of salesforce there is no guidelines on the ...
joao couto's user avatar
0 votes
1 answer
118 views

How to override the @media css property into the experince cloud site?

I am using the citizen theme in the experience cloud site. I am trying to change the menu text color but am not able to do that using the configuration. So I am trying to add custom CSS to override ...
Tushar Jadav's user avatar
  • 2,049
0 votes
0 answers
25 views

Hi, I created a lwc component to preview and download the pdf [duplicate]

I am creating a lightning web component to preview and download a pdf file it is working fine in lightning record page but when I am using same component on experience builder site page that preview ...
Hritik Thakur's user avatar
0 votes
1 answer
107 views

dynamic button link on mobile and desktop

I need to add some code so when I send an email on desktop to have a different link www.desktop.com under a button and to have a different link on mobile www.mobile.com . I've tried to use media ...
Duicug's user avatar
  • 469
1 vote
1 answer
109 views

CSS link button not responsive

I am creating a link button purely using CSS and HTML. This is because I want to pass the html structure to an external system. It works perfectly fine when the browser tab is maximized. but when I ...
SFDC Learner's user avatar
0 votes
1 answer
104 views

Print values on side of Vertical Navigation bar

I want to add content on marked zone from vertical navigation bar I am pasting my code and image for reference below could you please help me out HTML <lightning-card> <div ...
Arjun's user avatar
  • 3
0 votes
0 answers
31 views

B2B Template (LWR) - "globalStyles.css" style

What is the best way to include a "globalStyles.css" style so it can be loaded at site level. I tried to include this "globalStyles.css" in the static resources and then reference ...
Zburu Tech's user avatar
0 votes
2 answers
419 views

Increasing thickness of Lightning progress bar

I have an requirement where I need to increase the thickness of progress bar to 1rem. Salesforce has provided progress bar as below: <lightning-progress-bar value="50" size="large&...
Jason Rickert's user avatar
1 vote
3 answers
894 views

Visualforce PDF styles not applying

All of a sudden our styles on Visualforce pages are not applying. This is not happening in every org and only seems to be in the CS instances. I was viewing these vf pages today and did not have these ...
Zack Walton's user avatar
  • 1,616
1 vote
2 answers
1k views

LWC foreach : Evaluate each iteration and format styletags on each row in a table possible?

I'm transitioning from Aura Components to Lightning Web Components these days, and there are a few things I can't get a grip on. Especially this is when using the template for:each On each iteration ...
Firestone's user avatar
0 votes
1 answer
529 views

Proper way to limit a button height in LWC

Despite getting more savvy on all the functional capabilities of LWCs, I am still totally lost on the proper way to apply styling. This lightning data table is displaying what I need, but for some ...
Chris's user avatar
  • 61
0 votes
0 answers
105 views

LWC - Css styling has problem with :not(:first-child)/:not(:first-type) and ::before

I'm building a Salesforce look alike path. Because the way data display and looping in the component so I cannot use Path from lightning design system. HTML code: <template> <div class=&...
Pam's user avatar
  • 107
0 votes
0 answers
232 views

CTA border doesn't render properly with Outlook

I need to create an email with 2 CTA buttons that stay side by side. The first CTA has black background and the second one has white background. Both buttons have rounded corners (border-radius 6px), ...
Gio's user avatar
  • 21
0 votes
2 answers
360 views

Use aura attribute to define button background color

I am wondering if it's possible to use an aura attribute to set the button background color of a button. I was able to statically set the background color using CSS and by giving the button a defined ...
gjohnson282's user avatar
0 votes
3 answers
5k views

Remove Focus Around Buttons on Click

I have a button named 'Apply Filters' and onclick of that button I am filtering data.I want to remove focus from the button once we are done clicking. Once the button is click only on the click the ...
Hira Khan's user avatar
1 vote
1 answer
113 views

Customer community builder, edit CSS of single page

I want to edit css of a SINGLE page of a community experience. I want to apply these two rules: cursor:not-allowed; pointer-events:none; Only for this page: If i apply these rules on community css ...
dipierro49's user avatar
1 vote
0 answers
86 views

How to do word breaks inside a Visualforce page that is rendered as PDF?

Hi now I made a table using table-layout: fixed. However, the page is displayed beyond the box, rather than passing the table line as shown in the image. I searched these parts and tried using word-...
phphll's user avatar
  • 11
0 votes
0 answers
227 views

LWC radioGroup hide option labels

I'm struggling with the radiogroup lwc. I only want to display the radio button, I don't want to display the option's label and I want my radio button to be centered in it's div. The only thing I ...
CelineD's user avatar
  • 43
1 vote
1 answer
256 views

Applying style to Custom Datatype in Lightning Datatable

I'm currently trying to apply colors to each of these icons within the datatable. I tried to use the cellattributes to change the color, but it seems that we're not allowed to use our own classes and ...
Kevin Yao's user avatar
  • 117
0 votes
1 answer
208 views

Remove extra space from Modal

I want to remove this extra space coming into my modal. How to remove this? I am using the standard slds modal and browser zoom @100% Inspecting it shows slds-modal__content class is having height: 90%...
Akash's user avatar
  • 361
4 votes
3 answers
430 views

How can the highlighting of a vertical tab when it's clicked be prevented?

I have these tabs: <lightning-vertical-navigation selected-item={currentMenuItem}> <lightning-vertical-navigation-section> <lightning-vertical-navigation-item label={...
Gabriel Rivera's user avatar
1 vote
1 answer
84 views

Visualforce Page: How to display all the content/data in a single VF PDF page

I am trying a display a content/data in a pdf in VF page rendered as PDF, but in pdf the content is splitting into multiple pages which I dont want, is there a way we can try displaying everything in ...
Sagar 's user avatar
  • 25
0 votes
1 answer
2k views

How to create a custom Scrollbar for a particular section in LWC?

I am new to LWC and SLDS Designs. I have a certain design of a scrollbar I need to create but unable to get how to get this specific design. I need the scrollbar at the greyed out section. The Values ...
Amax1's user avatar
  • 121
0 votes
0 answers
185 views

Adding pop-up modal on page load to Salesforce CMS page not working

I'm trying to create a modal that pops up on page load and have the following in a Codepen, which works properly, but in Experience Builder, it's not working. In an "HTML Editor" component, ...
linnse's user avatar
  • 109
0 votes
0 answers
180 views

align screen of lightning accordion section and data inside it

I wanna match the size of lightning-accordion-section and data under it, currently accordion section is going outside of data screen, I wanna make it aligned. How to do it? HTML <lightning-...
NMS's user avatar
  • 3
0 votes
1 answer
130 views

slds-backdrop not covering the input fields on the screen

I am trying to add a lightning spinner, and I see the following behavior. The Input fields are not greying out when the spinner is on the screen Below is the code : CSS : .loadingSpinner{ position:...
SFDC Learner's user avatar
-3 votes
1 answer
194 views

LWC code for following, Hardcode data

i wanna display following on UI, can someone please tell me what changes need to be done in code. <template> <div class="slds-grid slds-wrap"> <div class="...
NMS's user avatar
  • 3
-1 votes
1 answer
285 views

Make the placeholder float up to display as label when user focuses on <lightning-input>

Is there any way to make a placeholder to float up and display as a Label for when a user clicks on or types on the field in LWC. Something like in the below link https://codepen.io/devesh8/pen/...
Dilipan Manoharan's user avatar
-1 votes
1 answer
2k views

How to change border-style to none in <lightning-input> LWC

I am trying to change the border style to none of a LWC Lightning-input tag. How should I do it?
Dilipan Manoharan's user avatar
0 votes
1 answer
352 views

conditionally Add watermark on all pages of visualforce page document

I have a visualforce pdf...the requirement is to put "Draft" watermark on all pages of vf document if quote status is either pending or awaiting approval. I tried to implement this by adding ...
Return0's user avatar
  • 317
0 votes
1 answer
71 views

Does style of vf page apply to called vf component

if a vf page has the style defined at top of page <style> @page { /* size: 8.5in 11in; */ size: A4 landscape; margin-...
Return0's user avatar
  • 317
1 vote
1 answer
482 views

Replicate border focus behavior lightning input

I'm using this repository because I needed a multi select combobox like this and works fine except the input is not a lightning-input so it doesn't have the blue border focus like this: https://...
Alexia's user avatar
  • 83
0 votes
1 answer
93 views

How to make Aura dropdown list look like LWC dropdown list?

The project I'm working on uses both Aura and LWC frameworks. The dropdown list of the two frameworks is quite different. i.e. when hovering on an option, aura highlights the option as grey and LWC ...
Chengzhi Yu's user avatar
0 votes
1 answer
420 views

Highlight the active tab in the navigation menu bar

I have this requirement of highlighting the active tab in the custom navigation menu, below is the code. Can someone suggest how to highlight the particular bar to differentiate. navbar.html <...
chaithaly's user avatar
0 votes
1 answer
185 views

Entire Section using slds-section with the toggle is clickable

When I click on anywhere over the section of slds-section, the toggle turns on/off. <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_1-of-...
SFDC Learner's user avatar
1 vote
0 answers
97 views

How to override base web-to-lead component styling in LWR with a static resource stylesheet

I am using the lead form in the experience builder (With no theme), and I am trying to style it. However, I seem to be hitting a brick wall. Here is my code: Head Markup: <link rel="stylesheet&...
Darryl Le Roux's user avatar
0 votes
1 answer
504 views

Resize lightning-input-field when it is a rich text field using the cursor

I have this in my LWC component <lightning-record-edit-form> <template for:each={draftableFields} for:item="field"> <lightning-layout-item key={...
Gene's user avatar
  • 1
1 vote
1 answer
263 views

Lightning Layout Item Styling Not Consistent

This is not making sense to me: I have a simple style declared in the component's css file: .targetcolor { background-color: #bff0ff; } Which I reference like this: <lightning-layout-item ...
BritishBoyinDC's user avatar
0 votes
1 answer
427 views

How to change the css of a standard SF component in LWR site

I have been using an LWR site with no theme selected (Basically a blank theme). I have used the web-to-lead markup in a custom LWC, but I need to change the styling of the form. Is there a way to do ...
Darryl Le Roux's user avatar
1 vote
0 answers
1k views

How to apply custom CSS in omniscript

I am trying to apply custom CSS to a particular node in the Omniscript for the particular element, i am getting error and custom CSS is not being applied. CSS class :- slds-form-element__label slds-...
Shekher's user avatar
  • 23
0 votes
1 answer
2k views

How to increase height of <lightning-input

how to increase the height of the <lightning-input class="customInput" type="url" label="URL" ...
Neophyte's user avatar
1 vote
1 answer
584 views

Force to hide numeric column in LWC Datatable

I have a datatable where it's possible for the user to be able to inform the amount of products he/she wants to purchase. The problem is that as I'm making some columns editable (editable=true), the ...
dsd's user avatar
  • 121
0 votes
0 answers
200 views

Change the hover border color in an experience cloud

I am not very familiar with CSS and experience clouds so I apologize if I ask a silly question. I wanted to run a screen flow in a public experience cloud site. Everything is working fine so far. ...
Andreas Epping's user avatar
0 votes
2 answers
231 views

How can I add line breaks to horizontally iterated items?

I want to display keyboard keys in a way that's similar to standard QWERT keyboard's look. Therefore, I want to add line brakes after "P" and "L" letters. Any help is much ...
Akif's user avatar
  • 15
0 votes
1 answer
478 views

row radio button - Change the color of the selected row

I'm trying to change the background color of the selected row in a table, but having some issues with it. I'm trying to select the row and catch it with event, and later change the color for the event....
Salvation's user avatar
  • 1,189
1 vote
1 answer
370 views

Isolation CSS Variable in Lighting Web Component

I have notice that if I set variable in the CSS and then set them using the document: document.documentElement.style.setProperty(var_name, val) Then this change apply to all components that using ...
Liron C's user avatar
  • 1,788
2 votes
1 answer
514 views

How to change disabled button text and background color using styling hooks?

I need to apply a background color to a disabled button, but the following did not work and no error is shown in the browser's console. Question Using styling hooks (mentioned here), how can I change ...
usernameabc's user avatar
-3 votes
1 answer
296 views

Change color of the text [closed]

I can't figure out on how to change the color of the text "This text should be black". for a HTML email in Content Builder I've tried to change the color from the style of the text to #...
Duicug's user avatar
  • 469
2 votes
1 answer
698 views

CSS in LWC - order in few components in one line

I'm trying to display three components in one horizontal line. The components are: A picklist - ComboBox. An input text field. A button. I have an issue where the ComboBox label is on the same line ...
Salvation's user avatar
  • 1,189

1
2
3 4 5
24