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

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

The aura component shows a list of chat 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 ...
2
votes
0answers
30 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
141 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
50 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
42 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
42 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
14 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
55 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
33 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
39 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
16 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
22 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
18 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
62 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 ...
1
vote
2answers
71 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
65 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
27 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
44 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
48 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
18 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
vote
0answers
26 views

CSS Formatting in a child component does not display proper format when called from Parent component

I have child component which accepts few input parameters and displays the same as text information in box kind of format. The issue is when I call this child component from parent component using ...
1
vote
1answer
56 views

LWC OSS utilising SLDS

I have seen the other questions on this subject and can either inject the slds stylesheet into my component, or use the synthetic DOM. Using either approach, SLDS styling is generally working ok. ...
2
votes
2answers
315 views

How to make buttons in a lightning-datatable smaller in LWC?

I have a lightning-datatable in my Lightning Web Component (LWC) that has several buttons in each row (first button only shown here): These standard-sized buttons consume quite a lot of vertical ...
0
votes
3answers
63 views

How to remove Outlook extra space?

Currently we are trying to get rid of some differences in the email appearance across different email clients. And a special one seems to be Outlook (2016) once again. We have a Layout with three ...
0
votes
1answer
94 views

Unable to set Text Alignment for lightning-input (Number) LWC component

I am using lightning-input of type number (LWC) and trying to have input text center aligned. At the end, element's class is being set to "slds-input", So I cannot use custom class to add css. I am ...
1
vote
2answers
53 views

Why isn't the focus attribute applied to the css of a lwc working?

I recently noticed that adding the :focus tag to the css of a div in a lwc does not seem to be applied. The :hover tag works just fine however so it seems to be specific to the :focus tag. HTML <...
1
vote
1answer
101 views

A button to scroll at the top of the page in LWC

Below Playground I have code with the button to scroll at the top of the page and conditionally render the button when user scrolled down. Now if I remove the custom render thing then button works as ...
0
votes
0answers
11 views

Anchor from Salesforce path to field section

We have a very big page layouts with different section. Is it possible to connect each field sections(Page Layout) from the guided path ? I tried using the link as that is the only option present ...
3
votes
3answers
523 views

How to control LWC styling dynamically?

I need different widths for my LWC for lightning and classic(lightning out) as my LWC is shooting out of card width in lightning. I am able to know whether a user is in lightning or classic using ...
1
vote
1answer
170 views

Inline editing datatable - show edit button on hover (LWC)

My column entries look like this: <td aria-selected="true" class="slds-cell-edit" role="gridcell"> <span class="slds-grid slds-grid_align-spread"> <span class="slds-...
2
votes
1answer
244 views

Change background color of lighting-Card component

Probably super easy, but struggling to change the background color of a Lighting-Card. Any Suggestions? I can get it to change in the console by manipulating element.style HTML <template> ...
2
votes
0answers
81 views

Modal being rendered in wrong position on lightning web component's mobile page

What I want I'm trying to show a modal to warn the user when the service he is trying to reach is offline. This salesforce page is accessed by Salesforce1 through a tablet. How I did I've created a ...
0
votes
0answers
11 views

Cannot remove scrollbar of background lightning page

I am having some issue in lwc. I have created a button component. On clicking on the button a modal box popups. Now, if a user scrolls outside of modal box the whole page page moves. So, I want to ...
0
votes
1answer
75 views

Cannot add a class to body tag in lwc

I am trying to add 'overflow: hidden !important' property in body tag of lightning page. For this, i did the following document.body.style.overflow = 'hidden !important' Unfortunately, it didnot ...
1
vote
0answers
53 views

LWC Modal popup in lightning console is not coming full screen

LWC lightning pop up is not getting displayed in Full screen inside lightning console. Please find below screenshot. And also second part of the question is when picklist is having more values, it ...
0
votes
0answers
38 views

Modal Popup is not with fixed position in mobile with lightning web component

I'm using the modal code available in Lightning Design System in a lightning web component that will be used in a tablet. The problem is that the modal position is not fixed on the screen, that is, ...
0
votes
0answers
37 views

How do I change the default CSS for lwc created by Salesforce?

I'm trying to change the color of a link in a lwc that I created, but no matter what I do, it's not letting me. This is the code I have: <lightning-formatted-url c-guesstheband_guesstheband="" ...
0
votes
1answer
38 views

How to override CSS in Aura Compoent

Update 2: After implementing the suggested answer, here is what I see the big space after 125px; and the purpose of top: 125px is to have a margin from the top. I'm trying to override the css style ...
2
votes
2answers
177 views

LWC: Adjust Width of Lightning-Button

Given the following: <div style="display:inline-block"> <lightning-button style="..." class="..." onclick={...} label="..."></lightning-button> </div> How can I adjust ...
1
vote
2answers
209 views

CSS file won't apply to Lightning Web Component

Trying to apply some basic CSS to a button on my LWC and can't seem to get it to apply. I followed all the basic guidelines in terms of containing the CSS file within the same folder as my LWC. It ...
0
votes
0answers
18 views

Sticky Table Header

I'm curently creating a Sticky section for Information i have to keep on my screen : As you can see right now, it is well placed. But i've tried on some other computer and the placement is different. ...
2
votes
1answer
105 views

Place image on last page in PDF document

I have a Visualforce page rendered as PDF with a static first page and dynamic pages following. I have a header and footer set and they are working as expected. My issue is trying to place an image ...
0
votes
1answer
24 views

slds css is not loaded. “Bad Gateway”

I use <apex:slds> in my Visualforce Page. It has been working well for long time but recently some users suddenly can not load slds css. I found that the following error occurs. https:///...
2
votes
1answer
429 views

LWC Datatable any possible way to remove 'select all' checkbox?

So the datatable does ALMOST everything I need for my component, very handy. But I only want one selection of a row at a time. I want users to have to actually click each row if they want to select a ...
0
votes
2answers
262 views

Overwrite standard lightning web component css by class name

I'm trying to set max-height property to slds-scrollable_y class inside lighting-datatable web component via css with: .slds-crollable_y{ max-height: 10rem !important; } But it's not working. Is ...
0
votes
1answer
56 views

CloudPages keeps adding max-width property

CloudPages keeps adding a max-width property to the style tag in my page. It is part of the main_style class and keeps getting inserted every time I open the code. I can delete it and publish the code ...
0
votes
1answer
140 views

Lightning Datatable errors tooltip not rendering properly on VF Page with lightning out

I have a lightning datatable. I'm trying to pop out error messages based on some values. I'm getting errors correctly mapped to each cell and each row as well. But the error tooltip is not getting CSS ...
2
votes
1answer
70 views

lightning:helptext popup not working

If the lightning component is opened through VF page I am unable to view lightning helptext popup. below is the VF that I am using. <apex:page sidebar="true" showHeader="true"> <apex:...