Hot answers tagged

5 votes
Accepted

I'm using for-each loop and want to highlight a single row in LWC using onmouseover but only the topmost row in the loop is getting highlighted

querySelector gets only the first matching item. You probably want: addColor(event) { event.target.classList.add('highlight'); } removeColor(event) { event.target.classList.remove('highlight')...
user avatar
  • 433k
5 votes

Security Review: Lightning: CSS Outside Component

This is a normal part of the content security policy that Salesforce requires. Over the years this has become stricter (as online security tends to do). Mozilla's MDN web documentation on Content ...
user avatar
  • 2,688
5 votes

Rendered LWC should not contain extra attribute in rendered element

It's working exactly as intended. Because not all supported browsers support proper CSS in the Shadow DOM, these "extra attributes" are added such that the tableRow class in c-test won't ...
user avatar
  • 433k
5 votes
Accepted

How to set consistent styling across many LWCs using styling hooks?

I would avoid loadStyle "workaround" as it's essentially going around the design of LWC and there's no guarantee that behavior won't change or be blocked in a future update. Instead, you can ...
user avatar
3 votes
Accepted

Why slds-backdrop is not part of slds-modal in Modal?

Backdrops (or overlays) are not always a mandatory element when using modals. Additionally, the backdrop of modals doesn't always need to be the same as the one used in SLDS, thus, giving us the ...
user avatar
  • 19.3k
3 votes
Accepted

slds-form-element__label not able to override

Due to LWC's Shadow DOM you cannot override those values using only the class name. CSS styles defined in a parent component don’t leak into a child SLDS allows to override them via styling hooks. A ...
user avatar
  • 3,393
3 votes
Accepted

LWC use querySelectorAll to get all ids associated with checked checkboxes in the view, and update the Database

You can query the elements, filter by the checkbox, and then grab the data you want. This is pretty trivial: this.checkedBoxesIds = [...this.template.querySelectorAll('lightning-input')] .filter(...
user avatar
  • 433k
3 votes

Lighting slds-box Add Text

This is standard legend tag that is used with fieldset. You can read more about it here. Because this is standard HTML functionality you can't find any info on it in Lightning Design System
user avatar
  • 4,107
3 votes
Accepted

Lighting slds-box Add Text

There is no ootb slds style that seems to do this, however, this is very basic HTML/css. You can easily achieve this by setting a negative margin to an element: Template.html <div> <h3>...
user avatar
  • 19.3k
3 votes

How to color the utility icons in lightning datatable in LWC?

You can Create a Custom Data Type to apply whatever styling you want; that is necessary AFAIK as other approaches are deliberately blocked. That approach also allows multiple buttons to be grouped in ...
user avatar
  • 130k
3 votes

How to color the utility icons in lightning datatable in LWC?

As you have found, the button-icon type, which creates a lightning-button-icon, only supports variant which provides for just a few select colours, as documented here. If you need to be able to ...
user avatar
  • 27.3k
3 votes
Accepted

"No TOKEN named force:base.varFontSize7 found" design token build error started today

Design Tokens lists varFontSize7 not globally accessible. Based on Use Lightning Design System Design Tokens, this should throw the error you're seeing IMPORTANT If you get the error: No TOKEN named ...
user avatar
3 votes

Break space not working for Arial Unicode MS in Visualforce Page

word-wrap was introduced in CSS 3 The library that Salesforce uses to turn Visualforce into PDFs, Flying Saucer, only supports up to CSS 2.1 You'll need to do something else to prevent your text from ...
user avatar
  • 48.1k
3 votes
Accepted

Set the color of a value in lwc

You have a few choices. Option 1 is to set the entire style: <div style={style}>{item}</div> Which is set in JavaScript: this.style = `color: ${data.itemColor}`; Option 2 is to set a CSS ...
user avatar
  • 433k
2 votes

How to change the pictures' shape to circle?

Use lightning-avatar to get the desired effect. Here's an update for your code: <lightning-tile label='' type="media" variant="Narrow"> <lightning-avatar variant="...
user avatar
  • 433k
2 votes
Accepted

How to control the height of datatable dynamically in LWC?

After getting data for datatable, store the length in a variable. Use a JS function to set the height of the datatable dynamically. HTML Code <div class="slds-table_col-bordered slds-...
user avatar
  • 1,014
2 votes
Accepted

How to make input element read only on button click

They all have a read-only attribute you can bind to the same variable (if all need to be set together). You can see that defined in their specifications within documentation. lightning-input ...
user avatar
2 votes
Accepted

Lightning Aura Component: Embedding child component has kind of Border

The border you are seeing is most likely coming from the surrounding Lightning Card Component. If you don't want a border, replace the lightning card with some other wrapper element. If you look at ...
user avatar
  • 19.3k
2 votes

:last-child selector not working

Your <hr /> needs to be outside the inner <div> for it to be considered the :last-child element, as that selector only considers the last child of the given parent, and, as written in your ...
user avatar
  • 433k
2 votes
Accepted

Lightning Lookup Component - Icon out of Input when having label

For customizing elements as you are, it is recommeded to use the SLDS blueprints and tweak the code/css as needed. example, <div class="slds-form-element"> <label class=&...
user avatar
  • 19.3k
2 votes

Visualforce renderas pdf, the css style is not applied

I know it's late but my answer might be useful for people that are currently facing this issue... Ok after finding that I already had set the attributes that other users have suggested in other posts: ...
user avatar
2 votes
Accepted

How to put footer only from the second page of vfs?

Good people, I got it. I will share the solution that worked for me. I'm developing using a visualforce page but the code can be adapted to html or etc. Set mso-title-page:yes; The leap of the cat is ...
user avatar
  • 255
2 votes
Accepted

display buttons in a single row in div slot footer

You can define your footer as a flexbox via slds-grid class, then add two div as the two columns and put in left (first) one the toggle and in the right one the buttons. Since buttons are inline ...
user avatar
  • 3,393
2 votes
Accepted

Removing first row in lightning-datatable

You're confusing LWC with Aura. .THIS is a specific Aura construct. You cannot pass custom css classes to a lightning-datatable, and as mentioned, you cannot otherwise directly manipulate the CSS ...
user avatar
2 votes

Removing first row in lightning-datatable

You have to modify the records property (which should be an array of objects) and remove it from there, instead of trying to hide the row with CSS which won't work due to the nature of shadow DOM.
user avatar
  • 19.3k
2 votes

how to style tab icons differently in lwc

Since you cannot directly add class names to those Icons, using styling hooks seems to be out of the question. I think your best approach would be to use the SLDS blueprints for tabs and there, add ...
user avatar
  • 19.3k
2 votes
Accepted

Overide CSS standard component LWC

It's a feature of LWC's Shadow DOM, which ensures both CSS and Element isolation. CSS styles defined in a parent component don’t leak into a child You're allowed to modify only what is defined in ...
user avatar
  • 3,393
2 votes
Accepted

How to add fields side-by-side in LWC (CSS)

Move the lightning-layout outside the iterator, and add the multiple-rows attribute, if necessary. <lightning-layout multiple-rows> <template key={TreatmentWithProducts} for:each={...
user avatar
  • 433k
2 votes

Is it possible to override the CSS of base Lightning web components like "Highlight Panel"

It's not really possible to override the css from standard component. Sometimes you can make small adjustments using the css variables that salesforce provides but that's about it. I think the only ...
user avatar
  • 650
2 votes
Accepted

change color of a lightning-vertical-navigation-item-icon

You could achieve this with styling hooks. In the chrome console you can see that for filling color is used this variable --sds-c-icon-color-foreground-default. You can override this variable with ...
user avatar
  • 1,532

Only top scored, non community-wiki answers of a minimum length are eligible