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?

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.

  • 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 Feb 19 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 Feb 19 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 Feb 19 at 19:50
  • Interesting suggestion, I'll look into that, thanks! – smohyee Feb 19 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.