How do I add a regular-table to a flex layout without breaking it? #115
Description
Support Question
I'm creating a panel element that has a few widgets at the top and then a <regular-table>
on the bottom. I want to use a flex-column layout for the panel, like so:
Following suggestions online, I tried setting the CSS to the following:
.myapp-panel {
display: flex;
flex-flow: column;
}
.myapp-breadcrumbs {
height: 16px;
width: 100%;
}
.myapp-filter {
height: 16px;
width: 100%;
}
regular-table.myapp-regular-table {
flex: 1;
}
and then I ran into trouble. regular-table
ships a stylesheet in its shadow root that applies position: absolute
to its :host
(ie the regular-table
element itself). position: absolute
does not seem to be compatible with having display: flex
in the parent panel; these styles together fling the regular-element
out of the visible area of the document.
Next I tried changing the position
styling of the regular-table
by adding more CSS:
regular-table.myapp-regular-table {
flex: 1;
position: relative;
}
However, changing the position: absolute
styling seems to completely break regular-table; on initial render it only displays one or two rows, and it seems to break in stranger ways as well:
(where the heck does that nub come from?)
Any suggestions on how I can achieve my desired layout (or reasonable facsimile) without breaking regular-table would be greatly appreciated.
For more context, here's a qualitative description of what I'm trying to achieve in terms of layout:
- The
.myapp-panel
element serves as the outer container for the other elements. Its height and width should each be able to grow to fill available space. Ideally, either of height/width should alternatively be fixed without breaking any child element behavior and/or CSS - The
.myapp-breadcrumbs
element should have a fixed height, and it's width should grow to fit its parent's width - The
.myapp-filter
elements should be the same (fixed height, grow width) - The
.myapp-regular-table
element should grow in height to fill the remainder of the panel, and its width should be set by the usual regular-table autosizing logic, up to the width of the containing panel