Resizing html window with javascript, KeyboardMaestro.ResizeWindow- MOVES it

Hi Friends

I'd like my floating info window to resize itself dynamically to its content. the ResizeWindow callback works great at resizing - passing just 2 args for size. But if the window has previously been moved by the user, Resize also snaps its position back to its previous location. I have a strong hunch :slight_smile: that it has to do with the optional args defaulting to a previous value?

function myDynamicResize()
{
		//	dynamic height. keep width
		newheight = document.getElementById('myStats').clientHeight;
		kMyWindowWidthString = "240,"    // with trailing comma
   		 // note - that '+' is a  string cat. works fine
		window.KeyboardMaestro.ResizeWindow(kMyWindowWidthString + newheight);
		// Hey, what are you doing way over there??
}

(bump :slight_smile: )

to be clear, i believe this is a bug. Any thoughts?

added observation - even when the window has not been moved by the user, the resize function changes to Y position of the window, to maintain the 'midline'. I think it should maintain the Y pos, and just extend/shrink the bottom if possible.

I've worked around it by calling the 'native' javascript resize, which works fine.

// window.KeyboardMaestro.ResizeWindow("240,"+newheight);
window.resizeTo(240,newheight);|

edit - I spoke too soon. javascript’s window resize restricts to a minimim height of 80 pixels, and I need to get down to 60, so back to KM’s resize. It works as I wish if I include all 4 coords:

	//	workaround:
	oldTop = window.screenY+titleBarHeight;	//	account for title bar, 19px
	oldLeft = window.screenX;
	oldWidth = window.outerWidth;

	resizeString = String(oldLeft) + "," + oldTop + "," + oldWidth + "," + newheight;

	window.KeyboardMaestro.ResizeWindow(resizeString);

So that solves your issue, correct?

So that solves your issue, correct?

Yes. It's a workaround. I'd humbly suggest that there's a bug in the "2 arg" version, but with this workaround, maybe not as high priority as before.

I can confirm that it seems to be a bug.

from: https://wiki.keyboardmaestro.com/action/Custom_HTML_Prompt

window.KeyboardMaestro.ResizeWindow(“width,height”) does not resize the window, it moves the window to new position: winX = width; winY = height.

@peternlewis, can you take a look at it?

This is incorrect.

When only width and height are provided it resizes the window as specified and then centers it on the screen. This stems naturally from its use when the window opens, if you only specify width and height it needs to put it somewhere.

You can base it on the current position of the window using:

window.KeyboardMaestro.ResizeWindow(window.screenLeft+","+(window.screenTop+19)+",220,100")

19 is the current title bar height, since ResizeWindow actually expects the content size rather than the window size.

I will add the context sensitive WINDOW function for future versions (which will also return the content size in this case for compatibility with the behaviour in this instance).

1 Like

Thank you for the clarification. My fallible eyes could only notice the window moving. :sweat_smile:

Please consider adding this info to the wiki page. It will simplify some of my macros.

Link to Peter's post has been added to KM Wiki Using JavaScript in the HTML Prompt.

How do you get the size to reflect the content of the page?

I had to make a <div> to include all elements in <body>:

<body data-kmwindowid="CustomKMMacroList" id="body" data-kmwindow="600,300,650,290">
<div id="wholepage">
...
</div>
</body>

And then use JS:

    function KMDidShowWindow() {
        // set window width and height
        // Note: width is determined by the width set in the body field.
        let width = document.getElementById('wholepage').clientWidth;
        let height = document.getElementById('wholepage').clientHeight + 20;

        // resize Window and move to center.
        window.KeyboardMaestro.ResizeWindow(width + "," + height);
    }

If I use let width = document.getElementById('body').clientWidth; etc., the new width (and height) will be determined by the width (and height) I set in data-kmwindow="600,300,650,290".

I can get a new height by let height = document.getElementById('wholepage').clientHeight + 20;. But using let width = document.getElementById('wholepage').clientWidth;, the width is still determined by the initial data: data-kmwindow="600,300,650,290".

Is there a way to get a dynamic width based on the content of the page?

a LOT of trial & error :grin:
I am certainly not an html/css savant, so I don't know which elements + margin + border + inner / outer...??? is the "true" dimension, but I found some attributes that work. it breaks easily and I've had to add some magic constants as the project evolves.

luckily my width is fixed, so its just height I'm tracking.