Hot answers tagged

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
  • 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 ...
user avatar
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&...
user avatar
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") ....
user avatar
  • 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 { ...
user avatar
  • 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-...
user avatar
  • 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-...
user avatar
  • 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 ...
user avatar
  • 191

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