0

I'm trying to dynamically update the attributes of a CSS class that is assigned to a bunch of elements in my lightning component.

In order to determine how to update the CSS of these elements, I need to query the CSS attribute values of other elements in my component.

(The specific scenario: I want to have two stickied columns w/ dynamic widths in my table during horizontal scrolling, where the left position of the second column is determined by the width of the first column. Couldn't find a pure CSS solution so relying on javascript to adjust column widths.)

I have two CSS classes assigned to the relevant elements in my HTML table:

.THIS .sticky-col1{
    position:sticky;
    left: 0;
    z-index: 1;
}

.THIS .sticky-col2{
    position:sticky;
}

At first I attempted to run the following method after rendering the component:

onRender : function(component, event, helper){
    var column1items = document.querySelectorAll('.sticky-col1');
    var column2items = documents.querySelectorAll('.sticky-col2');
    for(var i=1; i<column2items.length; i++){
        column2items[i].style.left = column1items[0].style.width + column1items[0].style["padding-right"];
    }
},

But the problem appears to be that Lightning Locker Service prevents direct access to the DOM, and therefore document.querySelectorAll() returns an empty proxy object rather than a list of elements.

Is there a security compliant way to get all the elements in my component that have been assigned a given CSS class?

0

1 Answer 1

2

Valid DOM Access: A component can only traverse the DOM and access elements created by a component in the same namespace.

Valid DOM Access Methods:

  • cmp.getElements() : Returns the elements in the DOM rendered by the component.
  • cmp.find() :Returns an Array of the components identified by their aura:id attributes.
  • cmp.find("aura id").getElement() : Returns the DOM element for the elements within the same component's namespace
  • event.getSource().get("v.name") : Returns the name of the element that dispatched the event;

In a nutshell, if you have identified your sticky-colums with aura:id's, you should be able to easily fetch them using cmp.find('the aura id') and combine it with the $A.util class methods (addClass, removeclass, toggleClass, hasClass)

Otherwise, there is no real alternative to querySelectors with Locker Service. You could set a css attribute dynamically if it were inline and use use aura:attributes to modify them dynamically.

4
  • glls, thanks for your reply. I was familiar with all of these concepts, and have the following issue with implementing them: first, if I already assigned distinct aura:ids to those table elements for other purposes, I lose the ability to collect them as a group unless I manually write out list of find() commands for each id. This is why I wanted to query by CSS selector, which they all do share in common.
    – smohyee
    Commented Feb 19, 2019 at 19:43
  • second and more significant issue: the $A.util methods only allow addition/removal of classes, rather than adjusting the attribute values within a given class. Per my outlined example, I'm trying to set a CSS value dynamically based on calculations that aren't available to me when writing the CSS classes up front.
    – smohyee
    Commented Feb 19, 2019 at 19:44
  • you could set a css attribute dynamically if it were inline and use use aura:attributes to modify them, therefore, you are facing a design problem and might need to rethink your approach on how to achieve what you are trying
    – glls
    Commented Feb 19, 2019 at 19:50
  • Interesting suggestion, I'll look into that, thanks!
    – smohyee
    Commented Feb 19, 2019 at 19:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .