League of Extraordinary FoundryVTT Developers•3y ago

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.

22 Replies

Calego•3y 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•3y ago

Message Not Public

Calego•3y ago

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

Unknown User•3y ago

Message Not Public

Calego•3y ago

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

Unknown User•3y ago

Message Not Public

Calego•3y 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•3y ago

Message Not Public

Calego•3y 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•3y ago

Message Not Public

Calego•3y 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•3y ago

Message Not Public

Calego•3y ago

Unknown User•3y ago

Message Not Public

Calego•3y 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•3y ago

Message Not Public

Calego•3y 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•3y ago

Message Not Public

Calego•3y ago

yep!

Unknown User•3y ago

Message Not Public

Leo The League Lion•3y ago

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

Unknown User•3y ago

Message Not Public

Gaming

Programming

scrollable tab contents