TyphonJS•9mo ago

ApplicationShell, elementRoot, and reactive offsetHeight with resizable: true

I am trying to make a menu that requires a bit of JS in order to work to set maximum heights for lists that otherwise should scroll. Problem is that I cannot find a way to get an up to date elementRoot.offsetHeight when the user resizes the application window. Is there a way to get those values?

32 Replies

VauxsOP•9mo ago

Looks like there is some kind of resizeObserver action I could use? Basically I need to find a way to get the size of the ApplicationShell

TyphonJS (Michael)•9mo ago

I'm not sure of the exact design of your menu, but have you checked out TJSContextMenu / for context menus and TJSMenu from #standard/component for in app pop overs usually activated by TJSToggleIconButton?

VauxsOP•9mo ago

I forgot about getContext("#external"); :facepalmpicard: No, but its very unlikely this is what I want

TyphonJS (Michael)•9mo ago

What do you want?

VauxsOP•9mo ago

I have a list that takes up the entire height of an application but once it overflows, it expands the entire application downward Instead, I want only the list itself to have overflow-scroll

VauxsOP•9mo ago

TyphonJS (Michael)•9mo ago

You can use TJSContextMenu or TJSMenu and embed your own Svelte component for the content if you need something custom.

VauxsOP•9mo ago

I unfortunately do not understand how this helps. Either way I found what I needed

const { application } = getContext("#external");
application.position.stores.height.subscribe((height) => {
        console.log(height);
});

const { application } = getContext("#external");
application.position.stores.height.subscribe((height) => {
        console.log(height);
});

TyphonJS (Michael)•9mo ago

Sure... You could also just create a grid layout for left / right sections that takes up the whole space and make the child / left side overflow-y: auto. I think you may be overcomplicating things as CSS layout of the content area should suffice without JS / manual monitoring of the height of the app.

VauxsOP•9mo ago

The issue is that there are also buttons at the bottom I mean I will gladly look into a pure CSS solution its just that using height so far has been the only thing I seen work

TyphonJS (Michael)•9mo ago

The left hand menu can be divided into a flex layout with the bottom button row having a set height with the menu taking the rest. I do think there is a CSS / layout solution to pursue before turning to a JS solution.

VauxsOP•9mo ago

because the issue is that the user can do this

VauxsOP•9mo ago

While I want the buttons to always be visible

TyphonJS (Michael)•9mo ago

You just need to adjust the manu to respond accordingly.

Wasp•9mo ago

The button element could have a fixed bottom position, and the list could have a max-height 100% minus the button element height But I ain't no CSS savant, so take my advice with a pinch of salt

TyphonJS (Michael)•9mo ago

There are several ways to solve this w/ CSS. What Wasp mentioned is one of them.

VauxsOP•9mo ago

I tried doing that, but the issue of the list not properly overflowing into a scrollbar remains

VauxsOP•9mo ago

The only thing changes is that the buttons have what amounts to absolute position at the bottom of the window

TyphonJS (Michael)•9mo ago

For that you have to use calc for the height for 100% - height of menu bar.

VauxsOP•9mo ago

This is why I wanted to use JS to set the max height get the height of the window and clamp down on the elements because otherwise resize just hides them

Wasp•9mo ago

Is the sidebar's element somehow not max-height? Like, the parent element? The parent element could be display box, and would then conform to the content height, and if the content height is another element with max-height 100% minus the button box, that won't help since it's still 100% of a resizing box

TyphonJS (Michael)•9mo ago

A flex box (column) for the left hand works easily enough too where you set the top scrollable menu to flex: 1; and give height: 80px; to the menu bar and make the menu bar its own horizontal flex layout.

VauxsOP•9mo ago

The sidebar column is already a flex col. flex: 1 with a set height does not change anything. The bottom row of buttons is already a flex-row

TyphonJS (Michael)•9mo ago

In general you might also be running into the annoying universal selector for the window content that is in the Foundry styles. It sets the child of .window-content IE top level to a flex of 1 automatically which will exhibit unwanted behavior for the core styles of overflow of .window-content when doing anything custom.

VauxsOP•9mo ago

I'll look into that.

VauxsOP•9mo ago

Well, overriding it sure isn't good lol

TyphonJS (Michael)•9mo ago

I do something similar for an unreleased module, but with a top bar and a scrollable bottom that resizes to the app size appropriately. You can see here where I reverse the the Foundry universal selector scoped to the app ID: https://github.com/typhonjs-fvtt/better-macros-directory/blob/main/styles/init.scss#L20-L23 And here is the window content layout: https://github.com/typhonjs-fvtt/better-macros-directory/blob/main/src/view/dir/MacroDirectory.svelte

VauxsOP•9mo ago

Finally got it

VauxsOP•9mo ago

Though looks like I need to make the buttons at the bottom a bit more stable but thats more doable I hope yep already done, just added height: 100% to the list

Gaming

Programming

ApplicationShell, elementRoot, and reactive offsetHeight with resizable: true