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 ...
- 434k
2
votes
Accepted
How align button to the right?
You first need to occupy the whole space.
You have mentioned size="3" and size="4" which means, you only occupied 7 out of 12 grids.
You need to change it to
<lightning-layout ...
- 6,492
2
votes
How align button to the right?
As per the documentation you can use the alignment-bump attribute to align the lightning-layout-item to left, top, right, bottom.
<lightning-layout-item size="4" flexibility="auto&...
- 607
2
votes
highlight a search word in LWC for each loop
You can also use a quick algorithm to break the parts up:
element.highlights = element.Title.replaceAll(RegExp(`(${searchTerm})`, "ig"), "\0$1\0")
.split("\0")
....
- 434k
2
votes
Accepted
Render as PDF page orientation
Per this question, you can alias different sizes (@page aliasName):
@page land { size:landscape; }
@page port { size:portrait; }
Which you can then apply via the page CSS attribute:
.landscapePage { ...
- 434k
1
vote
Accepted
conditional CSS in HTML class tag LWC
Such conditional CSS is not supported by LWC, you need to include all the CSS in a class property:
<div class={styleClass}>
get styleClass(){
return `slds-box slds-p-left_xxx-small slds-...
- 17.7k
1
vote
Accepted
Apply css class based on specific condition in Lightning component along with standard Lightning Design System
You can add the the standard SLDS class inside the expression in both conditions. something like this
<div class="{! v.applycss ? 'slds-col slds-size_2-of-12 customColor' : 'slds-col slds-...
- 12.8k
1
vote
Accepted
highlight a search word in LWC for each loop
I think you need to assign the returned value from replace function, taken from mozilla documentation: The replace() method returns a new string with some or all matches of a pattern replaced by a ...
- 191
Only top scored, non community-wiki answers of a minimum length are eligible