New answers tagged css
0
Have you tried using headerClass on the <apex:column> element?
As per the docs for the style attribute:
The style used to display the column, used primarily for adding
inline CSS styles. Note that this value does not apply to the
header and footer cells.
0
The final code works like a charm. When user clicks Save, it gets all IDs, sends all Ids to Apex as a String[]. In apex, updates a field with that string of Ids. So when the page is reloaded, all prior checkboxes are still checked.
<template>
<lightning-card>
<h3 slot="title">
<lightning-icon icon-name="...
2
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(element => element.checked)
.map(element => element.dataset.id);
Where [...iterable] copies an array or array-like element into a proper Array, Array....
0
You can only override properties that have hooks. This is because the Shadow DOM specifically prevents components from overriding other components' styles. The documentation says:
CSS styles defined in a parent component don’t leak into a child. In our example, a p style defined in the todoApp.css style sheet doesn’t style the p element in the c-todo-item ...
5
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 Security Policy also considers this a requirement. In that sense there's nothing left to do but place the inline CSS in an CSS file.
The reason for this is ...
0
Hi Qaszi and welcome.
A couple of things to help you get started.
If you are interested in development I recommend you start to learn to use a real tool like Visual Studio Code or IntelliJ/Illuminated Cloud. The dev console is not a tool for real development work.
You don't need to install Visual Force. If you are using an IDE like VSC you can just create ...
0
Yes, its possible by creating an external stylesheet i.e for eg:lwcCustomStyle.css(in this you can overwrite the css as per your needs) and storing the same in the static resource named lwcCustomStyle and then include the static resource in your LWC component.js as mentioned below.
import lwcCustomStyle from '@salesforce/resourceUrl/lwcCustomStyle';
import { ...
0
As per the documentation for lightning-carousel
The carousel displays one image at a time, and you can select
particular images by clicking the indicators
So if you want multiple images in a single view, you will need to build something custom, if they point to separate urls.
With a combination of HTML code example that can be found here. and SLDS code ...
-1
Use this lwc component carousel.
<template>
<div class="slds-size_3-of-4">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Basic Carousel
<lightning-carousel>
<lightning-carousel-image
src = "https://www....
0
Any updates to this problem i'm also looking for a solution to this beyond aggressive CSS editing for my LWC datatables.
1
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 lot of properties are setted using var() function, which get a custom property name as first parameter and a fallback (default) value.
I.E. font-size: var(--...
1
.You cannot override it using that selector only. You will have to be much more specific in order to override it, for example:
.containerInstanceClass div.className > div.otehrclass > div.slds-form-element__label
However, I strongly discourage you of using the !important flag in css, as it is not considered a best practice.
Instead of using the slds ...
-1
You can create a input using the SLDS design system.
I created a complete example as an answer here
2
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="circle" src={item.AvatarUrl__c}></lightning-avatar>
</lightning-tile>
You may need to remove additional surrounding markup or make other ...
Top 50 recent answers are included
