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.
C
Calego783d 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
UU
Unknown User783d ago
C
Calego783d ago
screenshot of the sheet dom in the element inspector is a good start
UU
Unknown User783d ago
C
Calego783d ago
what's inside .content? is there a div for each tab content that is selectively hidden?
UU
Unknown User783d ago
C
Calego783d 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.
UU
Unknown User783d ago
C
Calego783d 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;
}
UU
Unknown User783d ago
C
Calego783d 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;
}
UU
Unknown User783d ago
C
Calego783d ago
successkid
UU
Unknown User783d ago
C
Calego783d 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
UU
Unknown User783d ago
C
Calego783d 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...
UU
Unknown User783d ago
C
Calego783d ago
yep!
UU
Unknown User783d ago
LTL
Leo The League Lion783d ago
@f1r3w4rr10r gave vote LeaguePoints™ to @calego (#1 • 1433)
UU
Unknown User783d ago
Want results from more Discord servers?
Add your server
More Posts
Jr devI'm cleaning out my bookmarks and accidentally came back to this article. Potentially useful startinHTCPackage: `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 beiadvancement-wipCommander 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 canccjmk overlaybut for what I wanted I think I *needed* to append it there so that I can overlay the whole screencliits very very early alpha demoMonarch 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 whdragdrop shenneneginsRight now, a user can drag a spell onto their character sheet. I store that in a 'spell' array and leffect mini modulesI've gotten to the point where I'm confident in releasing a slurry of tiny no-config Active Effect rdamage application hooksNew 5e Hook ideas, gimme yer thoughts: `Hooks.call('Actor5e.preDamageApplied')` args: `damageAmounthook conventionsRegarding hooks, is the convention that _all_ `pre...` hooks are executed on the machine that initiaexpand 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 ownItem 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 mhero creator ui feedbackI'm trying to refactor the abilities' tab on the hero creation room to accomodate Race ASIs, but I d