9

I am trying to change my application to match the LockerService requirements and one of the issues I've ran into are using listeners that need access to the window object. I need to resize my components according to the size of the window, and this requires that I get window information like this.

var height = $(window).height();

This used to give the window height prior to LockerService, but now it returns 0, and the actual window object returned doesn't have a visible height field.

TestApp.app

<aura:application >
    <ltng:require scripts="{!join(',', $Resource.jquery, $Resource.customjs)}"  />
</aura:application>

Customjs

window.setTimeout(
    $A.getCallback(function() {
        resizeContent();
        $(window).resize(function() {
            resizeContent();
        });
        function resizeContent() {
            var height = $(window).height()-244;
            $('#ConversationBox').height(height); 
        }
    }), 1
);

What is the correct way to fetch the window height now that things are quarantined with the whole secure DOM aspect and your JS only being to reach DOM objects that it created?

  • Hi @JasonLee, Did you get any workaround to fetch the window height/width which works even when LS is active? – SE_User Sep 16 '16 at 4:48
  • @SE_User : Nope. – Jason Lee Sep 16 '16 at 16:25
8

We've identified the issue within LockerService and it's in our queue to fix.

Please open a case with support and tell them to link to our internal work item W-3198557.

| improve this answer | |
  • Any ETA on the fix for this? support closed my case so I don't know the progress. – Jason Lee Jun 22 '16 at 23:07
  • 1
    It's one of the items being worked on within the team, no exact ETA yet. – TrevorBliss Jun 22 '16 at 23:21
  • @Trevor Any updates on the fixes? we are also facing similar issues. – Pintu Francis Jul 4 '16 at 10:38
  • 1
    @Trevor - Is there a Known Issue available for this, which we can follow to get the update automatically? – VarunC Jul 5 '16 at 9:05
  • 3
    @SE_User This is fixed in the main Aura codebase, but is not currently planned to be released until Spring '17. – TrevorBliss Sep 26 '16 at 5:17
3

Just a thought on approaching this from a different angle: Remember that Locker will bar you from seeing DOM elements outside your Lightning namespace, but your components can still see one another.

There is a way to set dimensions relative to the height or width of the viewport in pure CSS using the vh and vw units. For example if your top-level component has this CSS:

.THIS {
    height: 90vh;
}

Then it means the element will size up to 90% of the available viewport. I can't be confident right now of expected results but at least in theory you can query that top-level component's height (whether through the DOM or events) and use it to trigger changes in other components' sizes.

| improve this answer | |
1

document.height is obsolete: https://developer.mozilla.org/en-US/docs/Web/API/Document/height

jquery is doing some magic under the hood to preserve the API, but you could replace that line with var height = document.clientHeight, and that should work just fine inside the LockerService.

note: we will get someone to investigate what's going on with jquery internals anyways.

| improve this answer | |
  • 1
    Hmm, document.documentElement.clientHeight seems to return the correct height when run manually inside my browser's console, but not from within the application.. It returns 0 just like $(window).height() . – Jason Lee Jun 16 '16 at 16:32

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.