TyphonJSVauxs!

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?

Vauxs!•50d 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)•50d 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?

Vauxs!•50d ago

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

TyphonJS (Michael)•50d ago

What do you want?

Vauxs!•50d 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

Vauxs!•50d ago

TyphonJS (Michael)•50d ago

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

Vauxs!•50d 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)•50d 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.

Vauxs!•50d 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)•50d 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.

Vauxs!•50d ago

because the issue is that the user can do this

Vauxs!•50d ago

While I want the buttons to always be visible

TyphonJS (Michael)•50d ago

You just need to adjust the manu to respond accordingly.

Wasp•50d 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)•50d ago

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

Vauxs!•50d ago

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

Vauxs!•50d ago

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

TyphonJS (Michael)•50d ago

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

Vauxs!•50d 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•50d 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)•50d 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.

Vauxs!•50d 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)•50d 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.

Vauxs!•50d ago

I'll look into that.

Vauxs!•50d ago

Well, overriding it sure isn't good lol

TyphonJS (Michael)•50d 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

Vauxs!•50d ago

Finally got it

Vauxs!•50d 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

TyphonJS Join

293Members

View on Discord

Want results from more Discord servers?

Add your server

TJSDocument discussion w/ VoodooFrogFollowing up on this discussion from `#dev-lounge` from @VoodooFrog: > I have a TJSDocument for an Advanced Templates Module (PF1)A thread to discuss Svelte and the Advanced Templates module.Automated AnimationsThis is a forum post to track discussion on Automated Animations. When TRL `0.2.0` is released I pla setPosition in SvelteApplicationThe `SvelteApplication` class has a function called `setPosition` that is there to support core beha TJSDocument delete actionWhen emitting this event, TJSDocument passes "undefined" as the first argument instead of the docume Quest Log Permissions / InfoHI @larsvonawesome. You asked: > Trying to find more info on Forien's Quest Log; I'm having an issue Creating a derived reducer for a DynMapReducerDo you have an example of how to make a derived reducer for a reducer that's not part of a TJSDcoume Quest Log objective counts not displayingHi there. the Quest Log objectives (done/total) don't seem to change when I mark quests as complete Item Piles: AuctioneerA few people in the League & some that I know personally have commissioned an Item Piles powered auc Svelecte AlternativesI'm looking to implement a searchable list of sorts, and I found Svelecte: <https://mskocik.github.i Setting up TRL / contributing to existing module (Item Piles)Hi @Paith. I have started this forum post where we can continue to discuss setting up TRL and gettin Reactivty and prepareDerivedDataFrom @Wasp > So I'm using prepareDerivedData to, well, derive some data for my items; some of them a Local Development w/ NPM LinkFrom @Gerark: > Hello! this is probably a base webdev question but I can't find a good reference for Issues Configuring TyphonJS in TSI'm receiving this message in my TS Files: `Cannot find module '#runtime/svelte/application' or its TRL / Svelte based game systemsThis post is a list of repos for game systems built with TRL / Svelte for Foundry. Please DM me if y List of TjsdocumentsLink to original response: https://discord.com/channels/737953117999726592/1067337319041998869/11562 Is there a way to export the quest log?I'm trying to setup a world for the PF2E Beginner Box but right now I working in a beta testing wor Fabricate@MisterPotts. Just starting a forum post to keep track of the conversation. > Fabricate doesn't ma Svelte 5 TJSDocument PrototypeGreets @FVTT ▹ Developer. As some of you might have seen there is a bit of paradigm shift that is Funky interaction with fokus managementTJS's Focus Management is creating fun issues for me again. focusKeep = true causes my drag and drop

Gaming

Programming

ApplicationShell, elementRoot, and reactive offsetHeight with resizable: true