search

vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
156 stars 27 forks source link

How can I let TabPanel use all space that Tabs provides? #208

Closed neko-para closed 1 month ago

neko-para commented 1 month ago

I can use css to make vscode-tabs to fulfill the screen, but the inner vscode-tab-panel still got the size that just contains its content. I've put a canvas inside it and using ResizeObserver to dynamic changing its size, thus I cannot just make the content bigger. I've tried adding height: 100% on vscode-tab-panel, but this makes it too tall (just the same height as the vscode-tabs)

vscode-tabs size QQ_1729590492289

vscode-tab-panel size QQ_1729590506069

vscode-tab-panel size with height: 100% QQ_1729590656210

neko-para commented 1 month ago

I've achieved it via overriding the layout vscode-tabs (e.g. by adding display: flex to it), but this does depend on the implementation, which shouldn't be the correct path.

The method above won't work, as the tabs are managed via display: none, thus display: flex will still evaluate its size.

.tabContainer {
  display: flex;
  flex-direction: column;
}

.tabPanel {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
}

.tabPanel[hidden] {
  flex-grow: 0;

  display: none;
}

.tabContent {
  flex-grow: 1
}

With the css above, things do got solved.

bendera commented 1 month ago

I think the <body> or the parent div has a 10px padding.

neko-para commented 1 month ago

I think the <body> or the parent div has a 10px padding.

Yes, body do have a padding, thus it makes it not suitable to use 100%, maybe.

bendera commented 1 month ago

I take this as resolved.

neko-para commented 4 weeks ago

I take this as resolved.

Actually I don't think my approach is elegant. It relies on the implementation after all. It would be better to have a more official and robust way.