League of Extraordinary FoundryVTT DevelopersCalego

scrollable tab contents

It is possible, and you're firmly in the css and DOM structure side of development with this line of inquiry. Let's thread this so it's easier to follow.

Calego•795d ago

@f1r3w4rr10r when you get a chance, show us the DOM you're working with and what css you've already got governing it. Overflows can be a tricky subject to debug but hopefully we can get you sorted

Unknown User•795d ago

Calego•795d ago

screenshot of the sheet dom in the element inspector is a good start

Unknown User•795d ago

Calego•795d ago

what's inside .content? is there a div for each tab content that is selectively hidden?

Unknown User•795d ago

Calego•795d ago

the basic theory of what you'll want to do is: 1. tell the browser to overflow: auto the element you want to scroll. 2. tell the browser to overflow: hidden the flex elements above that element. There's often some shenannegins that need to happen with height to make this actually work.

Unknown User•795d ago

Calego•795d ago

Parents So lets try something like:

.wasteland-ventures.actor-sheet .window-content {
  overflow: hidden;
}

.wasteland-ventures.actor-sheet .content {
  overflow: auto;
}

.wasteland-ventures.actor-sheet .window-content {
  overflow: hidden;
}

.wasteland-ventures.actor-sheet .content {
  overflow: auto;
}

If that's no good, show me what css rules are affecting .window-content, form.editable, and .content

But that just ends up with the sheet overflowing the application bounds.

Oh I missed this above, so you've already beaten me to that suggestion, skip to the "what is affecting those elements" question Next thing I'd try (shot in the dark): the form element needs to have a height explicitly defined, and also overflow: hidden

.wasteland-ventures.actor-sheet form {
  height: 100%;
  overflow: hidden;
}

.wasteland-ventures.actor-sheet .content {
  overflow: auto;
}

.wasteland-ventures.actor-sheet form {
  height: 100%;
  overflow: hidden;
}

.wasteland-ventures.actor-sheet .content {
  overflow: auto;
}

Unknown User•795d ago

Calego•795d ago

.wasteland-ventures.actor-sheet form {
  // height: 100%; // try without this first
  overflow: hidden;
}

.wasteland-ventures.actor-sheet .content {
  overflow: auto;
}

.wasteland-ventures.actor-sheet form {
  // height: 100%; // try without this first
  overflow: hidden;
}

.wasteland-ventures.actor-sheet .content {
  overflow: auto;
}

Unknown User•795d ago

Calego•795d ago

Unknown User•795d ago

Calego•795d ago

So flex does backflips to try to ensure its contents fit until you tell it to not by giving it overflow: hidden. since the form is a flex column set to fill its flex column parent (flex: 1), telling it that its contents shouldn't overflow itself was enough to stop that behavior. from there, we have to tell the element you do want to scroll that it should handle its own scrolling Grids are really nice for this problem too incidentally. here's a demo of a similar problem with a grid layout https://discord.com/channels/732325252788387980/754126927689678918/937875030669406258

Unknown User•795d ago

Calego•795d ago

without the flexcol, we'd probably need the height: 100% on the form, maybe max-height, not sure the permutations for the problem are the biggest reason it's hard to troubleshoot though now i wonder if I could make a flowchart...

Unknown User•795d ago

Calego•795d ago

yep!

Unknown User•795d ago

LTL

Leo The League Lion•795d ago

@f1r3w4rr10r gave LeaguePoints™ to @calego (#1 • 1433)

Unknown User•795d ago

League of Extraordinary FoundryVTT Developers Join

4KMembers

View on Discord

Want results from more Discord servers?

Add your server

Jr devI'm cleaning out my bookmarks and accidentally came back to this article. Potentially useful startin HTCPackage: `hero-creation-tool`System Specific CSSI'm not 100% about this, but it is worth watching out that your solution doesn't actually end up bei advancement-wip Commander register apitalking about permissions, im working on the registering api for the Commander, and I wanted to ask Azgaars Blurry MapHey all. I'm taking a look at my importer for Azgaar's Fantasy Map Generator and wondering how I can ccjmk overlaybut for what I wanted I think I *needed* to append it there so that I can overlay the whole screen cliits very very early alpha demo Monarch APIAlright, adventurous ones: I have a Beta version of Monarch with the new components API! Manifest: compacted chat cardsModules create problems to solve problems... Today's problem: "When I roll an attack, it eats the wh dragdrop shenneneginsRight now, a user can drag a spell onto their character sheet. I store that in a 'spell' array and l effect mini modulesI've gotten to the point where I'm confident in releasing a slurry of tiny no-config Active Effect r damage application hooksNew 5e Hook ideas, gimme yer thoughts: `Hooks.call('Actor5e.preDamageApplied')` args: `damageAmount hook conventionsRegarding hooks, is the convention that _all_ `pre...` hooks are executed on the machine that initia expand arraysIs there a way to `expandObject` except for an Array?edit-owned-item-effectI've made an abomination. This hacks its way past the limitations surrounding editing effects on own Item Pile feedbackSimple is king!effects to chat@badideasbureau is the `temporary` flag you look for in Effects to Chat a convention from somewhere 5e AEsI've been messing pretty heavily with some Active Effect assumptions and mechanisms in 5e. This is m hero creator ui feedbackI'm trying to refactor the abilities' tab on the hero creation room to accomodate Race ASIs, but I d

Gaming

Programming

scrollable tab contents