We’re rewarding the question askers & reputations are being recalculated! Read more.

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
1answer
21 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
24 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
votes
0answers
31 views

How to change input field color in LWC [duplicate]

I have a input field as below <lightning-input variant="label-hidden" type="number" placeholder="Calculate" class="inputFieldColor "> </...
0
votes
1answer
55 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
116 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
36 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
59 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> ...
1
vote
0answers
27 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
7 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
41 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 ...
0
votes
0answers
30 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
23 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
30 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
31 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 ...
1
vote
2answers
43 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
67 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
12 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
51 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
21 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
105 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
1answer
81 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
52 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
81 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
30 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:...
1
vote
0answers
60 views

Unable to upload the LDS 2.10.0 as static resource

As we know that static resource has a limit of 5MB, I am trying to upload the LDS winter 20 as static resource, but its size is more than 5 MB https://lightningdesignsystem.com/downloads/ In this ...
0
votes
0answers
19 views

CSS when dynamically creating a component

I am dynamically creating the following checkbox component. I want to have the checkbox line up next to or above the label. I believe I need to use CSS to do this. I don't know how to dynamically ...
1
vote
0answers
57 views

using custom styling in lwc for lightning components [duplicate]

I'm trying to follow this document https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/example to create an accordion section that resembles a page layout. This is the ...
0
votes
1answer
42 views

Modal content not displaying correctly

I am creating a lightning component that pops up from a button on Opportunity. In this lightning component I am using multiple recordEditForm tags that are just outside tab tags. When setting the ...
3
votes
1answer
81 views

Passing height and other style attributes of a component from app builder to LWC

I am trying to implement functionality where I can change the background-color, height and other parameters of a lightning web component. However, I am not able to see whether it reflected in the ...
0
votes
1answer
17 views

Why is my Visualforce PDF footer just off-center?

I have a Visualforce PDF page with a footer section, but this isn't centered - it is just off center and I can't figure out why. What do I need to do to get it centered? My CSS classes contain this: ...
0
votes
1answer
24 views

How to use css costomproperties in lightning component

I need to use css costomproperties in lightning Aura component like so :colors{--Color1:color: #95ccff;} .line{color:var(--Color1);} I tried to use it in 'STYLE' at component bundle, but I got ...
0
votes
0answers
37 views

How to remove app.css from every page?

I am trying to remove app.css from every page of our Salesforce website because we are completely overriding it with our own theme stylesheet. We want to remove app.css to improve the front end ...
0
votes
1answer
47 views

How do I center links in a Community page's Tile Menu?

I have a Community Page that has a Tile Menu, which holds 3 links that are displayed as images. For some reason, they're left-aligned, so the middle of the 3 images is to the left of the middle of the ...
0
votes
1answer
52 views

Set CSS Selector of child in Javascript

I have the following CSS Selector in an aura component: .THIS .slds-grid:last-child .slds-col:nth-last-child(1):nth-child(odd) lightning-formatted-text{ width: calc(50% - 2rem); } .THIS .slds-...
0
votes
0answers
12 views

Community - Static Resource Image Not Loaded [duplicate]

I created a page within the customer community and I entered several lightning components. Each component has its own css. For example .THIS .py-icon--tickets { background-image: url("/sfsites/c/...
1
vote
1answer
330 views

Need Help with custom types in Lightning DataTable - LWC

Here is the playground link to the code - https://developer.salesforce.com/docs/component-library/tools/playground/l_0ieW-Sm/17/edit My use case is to show popover on hover for a specific column in a ...
1
vote
1answer
98 views

Decrease icon size in lwc

i am using lightning-icon and i want to decrease the size of it. <lightning-icon icon-name="action:approval" size="xx-small"></lightning-icon> The smallest size is xx-small, and i can't ...
3
votes
1answer
56 views

applying styles to several html templates with single css file

I have we component lets say called orderFlow. Inside there is obviously orderFlow.html template file, orderFlow.js and also I have added orderFlow.css file. Additionally I have created few html ...
0
votes
1answer
29 views

adding extra inline css attributes with ContentImageByID

I have the following code which works fine, however the image loads at its original width at 540px. I would like to change the width of the image. I've tried adding style to <td> but it doesn't ...
2
votes
0answers
56 views

LWC: CSS animations from different components colliding with each other

I just noticed that two of my Lightning Web Components' animations are colliding with each other. Fragment of Component #1: HTML: <template> <span class="my-element" if:true={showModal}...
1
vote
1answer
292 views

Variant label-hidden with Lightning Input Field and LWC not hiding HelpText Icon? [duplicate]

I've seen various posts about how you cab hide stray elements like this with aura components, and I think the answer with LWC is always 'shadow-dom' as described here but is there really no way to ...
0
votes
1answer
74 views

lightning-tab align align center

I have only two tabs in lightning-tabset. And its align left. I need to have it in center. I tried padding-left: 200px; on ".slds-tabs" but nothing seems to be working. It works when i change through ...
0
votes
1answer
72 views

querySelector on inner template element

I'm trying to reach a lightning icon in my component and it is not working. It is wrapped with a <template if:true={condition}> <template> <template if:true={condition0}> <...
0
votes
1answer
20 views

How to to get conditional rendering inside an iterator which is inside a scroller?

`If ui:scrollerWrapper is uncommented, the class in card element does not work. <!-- <ui:scrollerWrapper class="scroll" >--> <aura:iteration items="{!v.commentsData}" ...
1
vote
1answer
122 views

LWC: Can I have an expression and a string as a class combination?

I have a div and I want to assign one css class statically and one dynamically. Something like this: <div class="my-class + {dynamicClass}"></div> However that is not working and I am ...
0
votes
1answer
65 views

Position fixed problem lightning

I have a custom lightning component on a record detail page. The component has a message which i want the user to be alerted. Everything works great but now i want the banner to scroll also if a user ...
0
votes
2answers
17 views

How to target the css for inputfields

I have a lightning component where the fonts a returning white which makes it difficult to read. I read some solutions deinstalling a calendar or reinstalling chrome which did not work in my case so I ...
1
vote
2answers
50 views

Modifying the css of a lightning page?

Is it possible to modify the css of a standard lightning page for a sf object? What I was thinking of is insert a custom component but would that component be able to find an element on the rest of ...
0
votes
1answer
45 views

Remove list view link for community members on record list page

We are using a "Full" record list in a Salesforce Community and would still like to be able to disable the drop down menu for changing the list view. There is only one list view this group should be ...