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
1
vote
1answer
18 views

Change the font color of a lightning:formattedUrl

The automatic color of my link using a lightning:formattedUrl is not black and I am trying to change it to the color black. Is there a way to do this, I have tried adding it in the class with color:...
0
votes
0answers
17 views

Show Popover on Scroll-able Div

I have a custom component which display list of result and a popover like below - When i make the div scroll-able, it looks like below, (Reason for scroll - List of result is too long) - Popover ...
7
votes
4answers
356 views

Is it possible to make one css or js in common to all my Lightning web components?

Here is my situation, I have two (and soon more) LWC, inside each component, I have the classic : html, css, js and xml. In my case, the first LWC is having many css properties in common with the ...
0
votes
1answer
27 views

What colors are supported by slds-progress-bar?

By default, the progress bar is blue. I am interested in other colors, particularly in red. The documentation only shows an example for "success" (by using the class slds-progress-bar__value_success),...
0
votes
1answer
29 views

Add both dynamic and literal CSS classes to the same element

Pretend I have an element that I wish to give a literal class, such as: <p class="slds-text-title">My Title</p> But I also have a dynamically determined class I wish to add, which I ...
2
votes
2answers
95 views

Dynamic CSS issue

The below works fine in the LWC playground, but drop it in to the local preview or an org and the css does not behave. I've discovered that the hover works on a single selector, but with sub ...
0
votes
1answer
41 views

Affix a Div while scrolling

I have two sections in an LWC and the section 1 contains lot of data hence that section scrolls. The section 2 is a fixed size div which has inner scrolling. Now I need the div on the right side(the ...
0
votes
1answer
18 views

IE 11 browser treating input number field as input text by allowing non numeric values

I have a form in a visualforce page where it contains an input number field. In the IE 11 browser users are able to enter invalid characters such as letters and commas. I have tested in Chrome, ...
0
votes
1answer
17 views

Overlay image on an other

Is it possible to overlay image on an other ? I want to do that to display notification on a Logo. I have one regular Logo and an other with red dot. With this code it is working but sometimes it ...
0
votes
0answers
30 views

Cannot apply color attribute to a lightning-output-field using CSS in LWC [duplicate]

I am trying to change the color of the <lightning-output-field> in LWC using CSS but it doesn't work. I am able to change the background color though. Is there any workaround for this? I don't ...
0
votes
1answer
28 views

Removing standard CSS SLDS or overriding

I have embedded a visual flow inside a component. On embedding some of the css is not going well and the CSS class is standard on debugging I found that it is because of the class and its properties ...
0
votes
2answers
34 views

How to adjust the location of lightning-helptext

I want to move the sf logo (tooltip) 2-3 pixels up so I tried to add custom CSS such as margin-bottom or padding-bottom to the element but it doesn't move. Couldn't find anything relevant in the ...
1
vote
1answer
48 views

Arrange a list of Data in Column and Row format using SLDS

I have a html file where I am trying to display some data in a better way, like this: Job Details | Value _____________|__________ JobType | Future ________________________ Status | ...
0
votes
1answer
29 views

Italicize subset of text in label of radioGroup

I am trying to hightlight part of the text in a radioGroup label. I can do this in a checkbox component using CSS. <aura:attribute name="registrationOptions" type="List" default="[ {'label':...
0
votes
1answer
30 views

Italize subset of text in label of a checkbox lightning component

I want to italicize part of the text in a checkbox label. I am not finding a way to do this. For example, I want the checkbox label to say Biologics technical workshop. Only the word Biologics ...
0
votes
1answer
36 views

Fixing the table header

I have a manual html table in lwc as hown in this Playground the goal is to fix the first 3 columns and first header row and with the below CSS and it is working as expected (In [playground it fixed ...
1
vote
2answers
69 views

Button :hover effects - MC

I'm failing to get button :hover effects working in Marketing Cloud. These are custom coded emails, with the correctly applied hover classes and properties. The emails have been tested with Mailchimp ...
1
vote
1answer
57 views

How to use a smaller font in lightning-datatable?

We are in the process of moving from Classic to Lightning. I am rebuilding some Visualforce pages to Lightning Web Components. One of the many challenges is this one: The font that is used in a ...
0
votes
1answer
55 views

How to style a lightning web component Radio button group

I'm having a radio group, and I need to customize it a bit, I want to remove the dott and keep only labels : <lightning-radio-group class="myRadioGroup" name="my radios" options={...
0
votes
1answer
34 views

slds-table css styling no longer makes header row grey? Doesn't match documentation

Edit: After testing some more, I've determined that this issue of the mysteriously white Data Table header occurs only when dropping the component into a Lightning Application with extends="force:slds"...
0
votes
2answers
66 views

How to control row height in lightning:layout

I have a lightning:layout with a lightning:layoutItem, containing a lightning:select. I want the row in the layout to be only the height of the select box but I can't figure out how to remove the ...
2
votes
0answers
31 views

Issues rendering background image in a visual force page into a word document

I'm having a couple of issues rendering a visual force page into a word document. The output I'm getting is in the image below. And what I'm trying to achieve is to have the table on the second page ...
0
votes
1answer
50 views

Dynamically change CSS class

I want to require that a checkbox be checked on a Community form. I am able to display an alert when it isn't checked. I don't want to do that. I want to display text on the form. I think I should ...
-2
votes
1answer
35 views

How can i create custom colored breadcrumb in LWC? [closed]

I want colored breadcrumb something like this. Please help me with designing the shape of each column (arrows shaped).
0
votes
1answer
102 views

How can i use var() in css in LWC?

This is what I'am trying to do: HTML: <li class="navBar2" style="--lwc-beforeColor: #0ec2df"></li> .css .navBar2{ height:29px; background-color: var(--lwc-beforeColor); } But ...
5
votes
3answers
292 views

Is there any way to dynamically pass a value to attributes in css fie in lwc?

I'am working on a lightning web component which contains .css file having following class: .navBar2{ height:29px; } .navBar2:before{ background: red; } Is there any way i can pass dynamic value ...
3
votes
1answer
120 views

Lightning Web Component Playground Inject LDS/Shared Style sheets in LWC.dev

So standard LWC disallows importing global styles and the shadow-dom encapsulation prevents CSS from "leaking" from the global/parent scope- There are some ways to get around this with Web Components:...
0
votes
0answers
15 views

Using Level 4 Media Conditionals in Aura Components

Trying to use media conditionals with the new level 4 syntax specified here. Heres the relevant part: Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media ...
1
vote
0answers
114 views

Aura component does not allow scroll in iOS only on Salesforce 1 mobile app

The aura component shows a list of text messages. Vertical scrolling does not work in iOS on the Salesforce 1 app. Works fine in Android. I looked at a few other questions like Scroll issue in ...
3
votes
0answers
110 views

Setting a max height for datatable in LWC?

I know when you specify a div with a height around your datatable you get a nice scrollable table: <div style="height: 300px:"> <lightning-datatable various-params></lightning-...
1
vote
1answer
188 views

CSS file upload and store in Marketing Cloud

I would like to create a full HMTL Landing Pages within Web Studio > Cloud Pages. I have my HMTL code and a CSS file. Where do I need to store my CSS file to be able to use it when creating my HMTL ...
0
votes
1answer
112 views

Override Standard CSS in LWC [duplicate]

Is there any way to override the standard css provided by salesforce in LWC? I tried the way we did for aura components but it doesnot seem to affect the structure in any way. Do we have different ...
0
votes
2answers
256 views

Change the color of Lightning-input label

I have below code for input text <lightning-input label="Email" class="textInput" value={rec.Name} onchange={handleNameChange}></lightning-input> Here I want to change the color of the ...
0
votes
1answer
90 views

CSS for <lightning-input type=“checkbox” > is not working in LWC

I have the below div inside my LWC html. <div class="container-fluid"> <div class="slds-size_1-of-2"> <lightning-input label="First Name"...
1
vote
0answers
16 views

Background Color breaks in mobile view in Lightning Community

I have a lightning community based on the Self Service template. I set up a background image and color for login pages: I activated and published my community. Now when I go the login page from ...
0
votes
2answers
258 views

Usage of variable in CSS in LWC

Is it possible to embed a variable as a CSS value in Lightning Web Component? X.js @api widthValue; X.css .styledDiv { width: {widthValue}; }
0
votes
1answer
74 views

LWC: Slide an element in and out

I'm building a Lightning Web Component for a standalone Aura app where ShowToastEvent isn't available. I've seen an example of a custom LWC toast component that shows and hides itself using slds-show ...
2
votes
1answer
122 views

Importing a common CSS in LWC

How can I use a common CSS file across every LWC component? /* common style */ h1{ font-size: 2rem; color:rgb(102, 94, 94); } For Example I want to use this CSS file in every component. Can ...
1
vote
0answers
39 views

LWC With iframe Height

I am trying to have an iframe inside a LWC fill the entire height of what's available, but can't seem to get it to work. According to the documentation, I think I should be able to apply class="slds-...
0
votes
2answers
32 views

Appearance of built-in Community Follow Button component

When I add the built-in Follow component to a Community page, I am able to customize its appearance. For example, I can configure it to display with curved edges (see image). However, when someone ...
0
votes
1answer
29 views

read only required field from standard detail page of community on any profile basis

in the community, we have a standard detail page where we want to restrict customer to update the status field what we have done until are following. CSS by a hierarchy of dom inside aura HTML but ...
1
vote
0answers
21 views

Styling an Embedded LWC on Flow screen

Is it possible to match the width of the standard screen elements that flow provides out of the box (like "Date" & "Type")? My custom LWC (Products) seems to be taking up 100% of the real estate ...
0
votes
2answers
100 views

Extract full email code from Marketing Cloud

I would need to replicate some emails built-in Marketing Cloud in other tools and I would like to know Which is the best way to extract the full HTML code of an email, considering there are some ...
2
votes
3answers
224 views

Adjust and fix appearance of lightning-map LWC component

In my Lightning Web Component, I am using the <lightning-map> Base Component to display a Google map. I have a few display issues and things I would like to adjust, but It doesn’t work as ...
0
votes
0answers
219 views

Custom footer layout in lightning flow inside a modal

In order to implement my business process, I set up a flow which is called inside a modal when the user clicks a lightning button on an object's record page. To improve the user experience I tried to ...
1
vote
0answers
16 views

Gantt Chart Lightning (aura) [duplicate]

I am trying to create dependencies between task in Gantt Chart for example finish to start , A task need to finish in order to start another task, We have a object which will tell which task is ...
0
votes
1answer
39 views

Custom font not displaying correctly in Screen Flow

I have built a visual flow and embedded it in a Visualforce page, then hosted in a force site. We also have our own custom font which we would like to display on the flow. However, it doesn't work, ...
1
vote
1answer
163 views

Lightning Styling not working on VisualForce Page

I have a complex VF page that needs a lot of updates, so I've created a copy of it to work on. Apart from the name, all else is identical - it even (for now) points to the same controller. In Setup, ...
2
votes
1answer
92 views

How to update the css of the slds progress bar?

I am using below code given at SLDS site. I want to modify the css to change the connector line width and color for pending and completed steps. I tried in browser but couldn't find any css class to ...
0
votes
0answers
19 views

design breaking while rendering as PDF in VF page

I am having a design issue when I try to download/view a ID card kind of template as a PDF. I have a template of an ID card as knowledge article and a View/download button near that. so the ID card is ...

1
2 3 4 5
15