Remove Internal Scrollbar from Equipment Scheduler

Ignition
1

I'm currently working on the layout and scaling of an Equipment Scheduler component that's placed inside a Flex container. The Flex container is configured with:

  • grow: 0
  • shrink: 0
  • basis: auto
  • overflow: visible

The problem I'm facing is that rows inside the scheduler are not dynamically scaling with their content — instead, the component introduces an internal scrollbar, which I want to avoid. My goal is for all rows to be fully visible without scrolling, and to let the overall page scroll vertically if needed (correctly setup by the root Flex container).
The Equipment Scheduler is configured with:

  • grow: 1 — if set to 0 the scheduler turns into a square with no visible content.
  • shrink: 0
  • basis: auto

Equipment Scheduler needs to display more machines without the scrollbar
Equipment Scheduler needs to display more machines without the scrollbar1641×349 25.5 KB

I initially looked into the rowHeight property, but it only accepts an integer value , which doesn't allow dynamic scaling based on content. After inspecting the component with DevTools, it appears that the scheduler uses a CSS Grid.

I'm wondering:

  • Is there a way to let the row heights auto-size based on their content — more specifically, the machine rows?
  • Can I override CSS grid behavior with the stylesheet to eliminate internal scrolling and let the component expand?

Any ideas or advice would be greatly appreciated!

2

I didn't want to spend too much time on this so I just ended up just setting the marginBottom of sibling flex container (a Date Selector). This ended up stretching the equipment scheduler out avoiding any issues with an internal scroll bar.