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
2 answers
2k views

LWC: How to make DIV fit with mobile view

I have two DIVs which I want to fit in Mobile view according to resizing. In the image, you can its behaving like 2nd image and i want it to behave like 3rd image. I am least aware of responsive pages ...
Praveen Behera's user avatar
0 votes
1 answer
262 views

alignment issue with lwc

I have a table in which we have 3 mandatory input whenever a value is missing we have a alert message coming below the input but that is causing alignment issue as the input with no error are little ...
prasanth's user avatar
  • 177
0 votes
1 answer
806 views

Can I conditionally add css in <style> tag on a visualforce page?

I have a visualforce pdf page, and I render different visualforce components depending on a value in my Apex controller: <apex:page renderAs="pdf" controller="...
joacoiudica's user avatar
0 votes
1 answer
626 views

How to control the size of the background image in visualforce PDF

I have a visualforce PDF, and I have an image I have to use as background, it contains a logo and some visuals. That image is in A4 format, but when I add it to the page as background image, it works ...
joacoiudica's user avatar
0 votes
1 answer
364 views

Is there any way to make lwc dual picklist component border different color

I have requirement where on condition i want to change the border color for lightning-dual-listbox . I am trying to override .slds-dueling-list__options with border color , but its not working https://...
sfdc_to_learn's user avatar
0 votes
1 answer
1k views

LWC Lightning Datatable - Highlight Cell Using CSS Class

I had a previous question where I asked how to dynamically highlight a cell. This link provided some answers and I was able to highlight cells using 'slds-theme_shade slds-theme_alert-texture'. How do ...
some guy's user avatar
  • 141
0 votes
1 answer
127 views

LWC icons not rendering in visualforce page or browsers like chrome/edge

I have a visual force page where I am trying to use 2 svg images. <apex:page lightningStylesheets="true" docType="html-5.0" title="My Configuration" standardController=...
Knight of the Vale's user avatar
1 vote
0 answers
1k views

LWC Lightning Datatable - Highlight Cell Dynamically

I am trying to highlight a cell dynamically. I have used this link however I get an error. Link: https://www.salesforcetroop.com/datatable_styling_in_lwc HTML: <lightning-datatable data={data} ...
some guy's user avatar
  • 141
0 votes
0 answers
168 views

slds-input css doesn't work

Hello guys I have a doubt related with Lighning-input style. I'm trying to align the value inside the textbox to the right but it seems that my css is ignored by Salesforce. I have the following HTML: ...
Gonçalo Lemos's user avatar
4 votes
3 answers
8k views

applying css to inner elements of lightning-input lwc

I am trying to add border color to lightning-input lwc componenet. First when i tried the below css <template> <template for:each={test} for:item="f"> <lightning-...
sfdc_to_learn's user avatar
0 votes
1 answer
239 views

How to change CMS collection Component's img-circle color in Community?

I want to change CMS collection component indicator's img-circle color from blue to red as mentioned in below image. After doing inspection in browser below is the property that sets the color to blue....
SFDCDJ's user avatar
  • 1,874
1 vote
1 answer
1k views

Named Pages: Footer on last page only

I am attempting to place a footer image in the bottom-right section of the last page of the Visualforce PDF only. I have found a solution that use named pages, however I cannot seem to get the ...
Lindsey Reams's user avatar
0 votes
3 answers
4k views

LWC: How to use static Resource Image in CSS in Lightning Web Component?

I am trying to use static resource image in CSS using the below code - JS: //Importing image from static resource import My_Resource from '@salesforce/resourceUrl/popUpImage'; //Defining this inside ...
Praveen Behera's user avatar
1 vote
1 answer
658 views

Cannot read property 'style' of null

I am trying to copy this from Code pen into my Visual Force Page: I added everything accordingly and the function of the Java script is being called upon load from the Apex controller but the Progress ...
Simple Code's user avatar
2 votes
0 answers
784 views

How can I force an SLDS modal to open within user's view in a very long LWC in the context of a mobile device

This question has already been asked here, but there are no answers at all. I tried this, but no luck. Can someone please assist? The Issue I have a custom LWC that implements a traditional SLDS based ...
Lightning Evangelist's user avatar
1 vote
1 answer
777 views

Border CSS not working properly with VF page rendered as pdf

Hi I'm trying to display rounded borders in a VF page using the below style on a individual div and a tr inside a table separately. style="text-align: left;border: 1px solid black !important;...
Vasu Gupta's user avatar
1 vote
0 answers
965 views

lightning-quick-action-panel remove scroll using css LWC

I am using lightning-quick-action-panel in the html and the component loads on a button click and it contains a data table. There are 2 scrollbars present and I want to get rid of one .When I ...
Reettik 's user avatar
0 votes
1 answer
1k views

How to style and align 3 fields in LWC component

<template> <lightning-card title="Update Service Appointment Earliest Start Time" icon-name="utility:date_time" > <span> <div class=...
SfdcBat's user avatar
  • 4,811
0 votes
1 answer
1k views

Can we change the color of error message in lightning-input (LWC)?

I am using the following code to show input field in LWC. <lightning-input placeholder="First" onchange={handleContactFieldValueChange} data-apiname="FirstName" ...
Kritik's user avatar
  • 266
1 vote
0 answers
1k views

How to set community font size

I inherited half baked community with some custom templates, few components, builder items and a custom layout (aura, implements forceCommunity:themeLayout). Was wondering what is the correct, best or ...
dzh's user avatar
  • 4,155
0 votes
0 answers
77 views

<div> won't display in c-section-header

I am trying to add helptext underneath the header of a page. For some reason, when I add the div with slot="testSlot" in the below code, the div doesn't even render. Screenshot of what I ...
Tom's user avatar
  • 115
0 votes
1 answer
2k views

add border radius to lightning-accordion header using styling hooks

I'm trying to add border-radius property to lightning-accordion-section header but the following syntax seems to work with background color but not with border radius. What is the right combination of ...
sam_s's user avatar
  • 966
0 votes
1 answer
172 views

Make the last tab in slds scoped tab align right

basically we have this scoped tab in lwc writing using an slds scoped tab, which looks like below: We want to make the New button float right. The code looks like below: <div class="slds-...
Lance Shi's user avatar
  • 13k
0 votes
1 answer
1k views

Heading : date text inside date field not aligned to left only on IOS 15 and higher for lightning text date type aura component

I am using the following css class on my lightning-input type date field on my aura component css: .THIS.test{ -webkit-appearance : none !important; text-align :left !important;} cmp: <...
Arush Kaushal's user avatar
0 votes
2 answers
1k views

problem styling visualForce page in PDF

I have a visualForce page with good styling, but when I try to transform it into a pdf page, some of the css styling doesn't work anymore here is my visualForce page: and the pdf version: as you can ...
Alexis's user avatar
  • 129
1 vote
1 answer
1k views

Make every column on slds table same width

I have a table using slds-table classes. The only problem I have is some columns are wider than others, and I don't know why: Here is the code for the table: <table class="slds-table slds-...
joacoiudica's user avatar
1 vote
2 answers
655 views

Can accordions to have rounded corners?

I have tried CSS's border-radius and SLDS hooks on lightning-accordion and lightning-accordion-section, but I am unable to achieve rounded corners on it. I have changed the color to lightgray so I can ...
Tristan Berger's user avatar
0 votes
1 answer
699 views

How to target border-bottom-left-radius using Salesforce Styling Hooks?

I'm trying to target the input box ".slds-input" in the Salesforce lightning-input component. What is the correct syntax for border-bottom-left-radius using Salesforce Styling Hooks? I've ...
cpascua's user avatar
3 votes
1 answer
3k views

Can we use styling hooks on lightning-progress-indicator ? Or how to change background color of steps?

I have been trying to modify the standard color for the 'completed' steps on the lightning-progress-indicator LWC (path type): https://developer.salesforce.com/docs/component-library/bundle/lightning-...
Randy's user avatar
  • 33
1 vote
1 answer
759 views

Before After LWC Slider

I am trying to create an image before and after comparison slider in LWC. I am using the code from this guy (https://codepen.io/Coding-in-Public/pen/NWyjZwO) but when I put the component on a page the ...
Brian23Gt's user avatar
  • 119
0 votes
0 answers
1k views

LWC: lightning-input checkbox disabled css

I am writing an LWC component where as per design received, need to customize lightning-input checkbox. Customized output: Code Used: I have used styling hooks as per documentation from salesforce to ...
Akki619's user avatar
  • 101
0 votes
1 answer
411 views

Salesforce Community - Set content width max with in PX instead of %

I'm trying to set the max width of the community section to be 1000px, however the controls in the community only let be adjust by % and not by px. I've been trying to override using CSS but can't ...
Claire's user avatar
  • 19
0 votes
1 answer
669 views

Can't create a dynamic footer for printed visualforce page with landscape and portrait pages

I am creating a downloaded document from a visualforce page using pdfPage.getContentAsPDF() and passing in some parameters. I am using @page properties to print the document as a page. The first page ...
anotherdayattheraces's user avatar
0 votes
1 answer
2k views

conditional CSS in HTML class tag LWC

very simple but stuck. I used conditional CSS in a js file get styleClass(){ return this.show ? 'class0': 'class1'; } In the HTML file, the div class looks like <div class="slds-box ...
relcey's user avatar
  • 13
0 votes
2 answers
31k views

How align button to the right?

how can I align this button to the right side? I tried with "some classses" but it is not changing the place (working with lwc) Html: <template> <lightning-card variant="...
Alex Barón's user avatar
0 votes
2 answers
495 views

highlight a search word in LWC for each loop

I have the below code where i want to highlight a given word .But the word is not getting highlighted. Tried using tag Below is the code. FOr this below given code, i am trying to highlight word &...
sfdc_to_learn's user avatar
-1 votes
1 answer
3k views

Set the color of a value in lwc [closed]

I have fetched the data from apex method using wire adapter to lwc. js file if(data) { this.item=data.item; this.itemColor=data.itemColor; } i have to set the color to the item value.i have tried ...
Teancy John's user avatar
1 vote
0 answers
238 views

How can you style a section in salesforce community?

Is there a good way to target a specific section within a community page? (Also I am under the assumption that this styling is either done in CSS overrides or the theme of the page, please let me know ...
Matthew H's user avatar
-1 votes
2 answers
2k views

Apply css class based on specific condition in Lightning component along with standard Lightning Design System

I'm trying to implement a css property from the style class of the Aura component based on the value of Aura attribute along with certain other slds class as well, which will be static. Below are the ...
Vasu Gupta's user avatar
1 vote
1 answer
655 views

How can I reference a font in a static resource from a community login page when I can't use URLFOR in CSS and the static resource sits behind auth?

Working on rebranding a portal/community/experience login page. The designers, being non-Salesforce folk, have a CSS font-face tag in there that references the font files and I've got them in a ...
Rob Cowell's user avatar
2 votes
1 answer
816 views

Render as PDF page orientation

I'm trying to have both portrait (page one) and landscape (page two) in a visualforce page which is 'render as PDF'. I have tried various options but cannot get it to work, I can only get all ...
jameshoyles's user avatar
1 vote
1 answer
1k views

lightning-data table styling

I have an lwc that is used to display a lightning-input in a lightning-datatable. I cannot get it to look right. showProducts.js (parent lwc) import { LightningElement, wire, track } from 'lwc'; ...
mackmama's user avatar
  • 709
0 votes
1 answer
725 views

Remove focus from close button on lightning:overlayLibrary modal

I have a flow modal that is generated via the lightning:overlayLibrary showCustomModal(). Is it possible to remove the default focus (or at least hide the focus with CSS) that is applied to the close ...
Trevor Gill's user avatar
0 votes
1 answer
501 views

How can I add top border in lightning-tab

I want to use CSS to add top border in my lightning tab. I know there is --slds-c-tabs-item-color-border-active to set the bottom border color but I don't find any to set the top border. I added it in ...
Abhay's user avatar
  • 1
0 votes
2 answers
274 views

Adapt the heigh of an iframe window for an embedded chat inside a VFP

I'm integrating an embedded chat using a VFP in Experience cloud site. (Only solution proposed by Salesforce as the chat is interacting with another Salesforce org). The button is configured within ...
Sara el hannaoui's user avatar
1 vote
0 answers
815 views

Update CSS Of Lighting input of Type File (LWC)

I want to update CSS of <lightning-input type="file" I want to change the Text of button as well as want to move attach button next to upload file. I want to remove text or drop files I ...
Nachiket Deshpande's user avatar
0 votes
0 answers
61 views

I'm trying to get the two buttons to fill the width of the Template. How would I do this

I want it to look like each tab is 50% of the template. <template> <lightning-tabset variant="scoped" active-tab-value="2"> <template class="slds-...
Scylthia's user avatar
1 vote
1 answer
206 views

Break space not working for Arial Unicode MS in Visualforce Page

I have been trying to implement Chinese traditional characters in my Visualforce pdf. Seeing the salesforce documentation, I changed the font to Arial Unicode MS but the word-wrap: break-word; is not ...
Beta Tester's user avatar
0 votes
1 answer
239 views

LWC - Styling the button

Quick question for the styling in LWC. This is styling in JS. function changeVisibility() { document.getElementById("imgbox").style.visibility = "none"; } And I'm trying to do ...
Ian Lee's user avatar
  • 137
0 votes
1 answer
764 views

How can I show more than 3 cards in LWC?

My page looks like this (I can see only 3 cards but there are more) https://i.sstatic.net/wnjw7.jpg How could I change this to show as many cards as possible? Should I use some attribute from SLDS or ...
NonameJavaNoob's user avatar

1 2 3
4
5
24