Skip to content

How do I add a regular-table to a flex layout without breaking it? #115

Closed
@telamonian

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:

image

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:

image

(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

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements/bugs/changes to documentationquestionQuestions about use, potential features, or improvements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions