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.
1,133
questions
-1
votes
0
answers
36
views
Need to change a color of setCustomValidity Message
I have a setCustomValidity() method to display error message in lightning input. But there is a one warning message need to display for the lightning input instead of error message.
For that, can I ...
- 7
1
vote
1
answer
25
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 ...
- 97
0
votes
1
answer
18
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 ...
- 5
0
votes
0
answers
25
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 ...
0
votes
2
answers
71
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&...
1
vote
3
answers
411
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 ...
- 1,521
1
vote
2
answers
63
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 ...
- 15
0
votes
1
answer
39
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 ...
- 51
0
votes
0
answers
30
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=&...
- 97
0
votes
0
answers
34
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), ...
- 11
0
votes
2
answers
61
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 ...
0
votes
3
answers
245
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 ...
- 15
0
votes
0
answers
30
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 ...
0
votes
0
answers
35
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-...
- 1
0
votes
0
answers
39
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 ...
- 33
1
vote
1
answer
38
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 ...
- 103
0
votes
1
answer
42
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%...
- 361
4
votes
3
answers
185
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={...
- 1,215
1
vote
1
answer
60
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 ...
- 25
0
votes
1
answer
199
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 ...
- 99
0
votes
0
answers
50
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, ...
- 109
0
votes
0
answers
73
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-...
- 3
0
votes
1
answer
56
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:...
- 97
-3
votes
1
answer
65
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="...
- 3
0
votes
0
answers
45
views
Can I override the css of the default modal launched by setUnsavedChanges?
So the modal that pops up when this code is called: unsaved.setUnsavedChanges(true, { label: 'Component Name here'})
Looks like this:
The issue is that I'd like to remove the save button, and edit ...
-1
votes
1
answer
81
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/...
-1
votes
1
answer
209
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?
0
votes
0
answers
50
views
background watermark image size in visualforce pdf
I am trying to add watermark across all pages of vf page document however the image size becomes too large and overflows all the pages. Below is my code
<style>
<apex:outputText rendered=...
- 297
0
votes
1
answer
79
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 ...
- 297
0
votes
1
answer
47
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-...
- 297
1
vote
1
answer
162
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://...
- 73
0
votes
1
answer
31
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 ...
0
votes
1
answer
221
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
<...
0
votes
1
answer
62
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-...
- 97
1
vote
0
answers
66
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&...
0
votes
0
answers
174
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={...
- 1
1
vote
1
answer
54
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 ...
- 13.5k
0
votes
0
answers
157
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 ...
1
vote
0
answers
475
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-...
- 11
0
votes
0
answers
103
views
Change color Action in Highlight Panel
I have created an action on a custom object and added it to the Highlights Panel for its record page. Is there a way to change the color of the Action button itself? In an LWC I've been able to do ...
- 659
0
votes
1
answer
697
views
How to increase height of <lightning-input
how to increase the height of the
<lightning-input
class="customInput"
type="url"
label="URL"
...
- 3
0
votes
0
answers
61
views
Lightning datatable default padding for some columns is 0
I am using simple wrapper for lightning datatable. I have removed all custom style from all related files, removed all params passed to columns, but i have padding: 0 for my currency. Here is code ...
- 1
0
votes
0
answers
22
views
lwc generating class 'homeDesktopTemplateHeaderThreeColumns' putting min-width css property
<template>
<div class="listContainer">
<template if:true={products.data}>
<template for:each={products.data} for:item="product">
<div key={...
- 1
1
vote
1
answer
229
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 ...
- 121
0
votes
0
answers
118
views
Change helptext icon color of lightning-input LWC
The issue Im facing is that I want to customize the color of the helptext associated with a lightning-input element in a Salesforce Lightning Web Component (LWC). Im looking for a way to change the ...
0
votes
0
answers
113
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. ...
0
votes
2
answers
70
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 ...
- 15
0
votes
1
answer
229
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....
- 1,107
1
vote
1
answer
156
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 ...
- 1,764
2
votes
1
answer
283
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 ...
- 285