New answers tagged css
0
I do think that this is an oversight by Salesforce. There is, however, a way to dynamically control the height of the datatable's container div as described in this thread: How to control the height of datatable dynamically in LWC?
Here is my implementation where I set a container height of 150px when the number of rows in my table is more than 3:
HTML Code
&...
0
The lightning-layout-item is already a container; you don't need a div inside of it. Don't use style="width: 20%" or something like that, but instead specify the desired size.
A closer approximation to what you want would be:
<lightning-layout style="width:100%;" height="auto">
<lightning-layout-item size="3&...
1
Add a class to the lightning icon
<lightning-icon icon-name="utility:down" class="svgWhite"></lightning-icon>
Add the css and change the styling hook variable
In this case the icon was using this to display the colour
.svgWhite {
--sds-c-icon-color-foreground-default: white;
}
Done,
More on styling hooks here:
https://...
1
You need to use a combination of Styling Hooks and the JavaScript map() function to achieve what you need.
First, use Styling Hooks to create 2 CSS classes - one for each state
.available{
--sds-c-card-color-background: green;
}
.unavailable{
--sds-c-card-color-background: red;
}
Next, edit your wire function to return a CSS class along with the ...
1
In Aura, use ltng:require:
<ltng:require styles="{!$Resource.CssFile}" />
In LWC, use loadStyle:
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import STATIC_RESOURCE_NAME from '@salesforce/resourceUrl/CssFile';
// ... some time later ... //
loadStyle(this, STATIC_RESOURCE_NAME).then(
() => {
// do ...
0
Unfortunately, the answer is no you cannot increase/change width of global actions list icon wider as this is salesforce standard inbuild functionality and would recommend to post Idea here so that it can reviewed. However you can customize quick action icons using static resource.
Thanks
2
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 any color you want, as follows.
yourComponent.css
:host {
--sds-c-icon-color-foreground-default: green;
}
0
The issue seems to be two-fold,
Your css is targeting
Classes:
- my-icon
- slds-nav-vertical__action
HTML Tags:
- lightning-primitive-icon
Whereas your HTML is slightly mismatching the CSS provided
Classes:
- myIcon
HTML Tag:
- lightning-vertical-navigation-item-icon
If you rename your CSS target to look for .myIcon rather than .my-icon you should ...
1
The problem is that the framework does not know when you change the inner property of the array. So you need to reinitiate the data property.
Also, you don't need to do JSON stringify in the callRowAction just pass the row id in the other function.
Make the below changes in two functions callRowAction and changeiconcolor
callRowAction(event) {
this.tskId = ...
0
This is possible thanks to this js snippet.
renderedCallback() {
//prepare style component which will be inserted to dom
const styleCss = document.createElement('style');
styleCss.innerText = ``;
//get all tabs with data-color attribute
this.template.querySelectorAll(`[data-color]`).forEach(tab => {
//get actual id of the tab ...
3
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 explicitly define the button colour using CSS colour options then you need to create a specialized lighting-datatable that uses a custom data type for this column, ...
1
There are 2 problems that prevent us from using "Styling Hooks" to achieve custom styling.
Per documentation, --sds-c-button-text-color is not available for use in any of the lightning-button-icon variants.
Styling hooks don't seem to apply to base components nested inside lightning-datatable unless we apply them to the :host selector, which isn't ...
3
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 one table column.
(I've used the variant property to have blue icons and that is nice and simple. Can you add to your question to explain why "The variant ...
1
This is MS Doc specific so you need to have Visualforce spit out tags that will play nice with it. Essentially there are certain Microsoft Office style attributes only supported by Microsoft Word that need to be included. There are posts on Stack Overflow with examples.
@page Section1 {
margin:0.75in 0.75in 0.75in 0.75in;
size:841.7pt 595.45pt;
...
1
You could use label-hidden variant, define your own div for the label and put both elements (label and lightning-input) in a flex box:
<template if:true={locatedOnTab}>
<div class="slds-grid slds-grid_vertical-align-center">
<div class="slds-form-element__label">Now page number</div>
<...
0
So I just spend hours tackling the same problem. I have found a solution by overriding the styling hook with the following CSS in my LWC
:host {
--lwc-spacingMedium: 0px !important;
}
Top 50 recent answers are included