The pop-up opens at the requested size, but its two alarm tables keep their initial dimensions until an operator drags the window edge. Treat that as an initial layout problem: size the pop-up through its opening position, then let the container and tables consume the dimensions calculated by the session.
Stop forcing the alarm tables to refresh
Start by removing the quick fixes that act on the children instead of the pop-up. Refreshing a table binding at startup reloads data; it does not guarantee that the browser recalculates the table against the final parent dimensions. Changing a margin can trigger a later layout pass, but that only masks the timing problem. The result may depend on display speed, session load, or which component renders first.
Changing the view from a flex container to a coordinate container does not correct an opening size that reaches the view through component bindings after initial layout. Building a fresh flex container with two tables and basis: 50% can reproduce the same symptom because the tables still receive their first measurement from the same parent-sizing sequence.
Keep data-refresh logic separate from geometry. Remove startup actions added solely to provoke resizing, and leave the table bindings responsible only for alarm data and presentation.
Gate check: Open the pop-up once with the refresh and margin workarounds disabled. Confirm that alarm data still loads, even if the initial table dimensions remain wrong.
Set the pop-up dimensions when opening it
Pass the requested height and width in the position argument of system.perspective.openPopup. This gives the pop-up its responsive geometry at creation time, before its child containers and alarm tables calculate their available space.
position = {
'height': '30%',
'width': '60%'
}
system.perspective.openPopup(
id,
'View',
position=position
)Percentage dimensions adapt to different available screen sizes. Pixel dimensions remain useful when the design requires a fixed physical layout, but they will not scale with the display. Do not also drive props.width and props.height through separate view parameters unless another requirement depends on those values. Two sizing paths create competing state and make the first rendered frame harder to diagnose.
If the calling script already constructs a position object, add the percentage values there rather than applying a second resize after opening. Keep the pop-up ID and view path used by the application; id and 'View' above represent those existing arguments.
Gate check: Open the pop-up without touching its border. Confirm that its outer height and width change proportionally between the large and small target displays.
Connect the root container to the available space
The outer window can scale correctly while the view inside it remains constrained. Inspect the root container and the immediate container holding the alarm tables. Remove fixed child dimensions that prevent those containers from filling the area supplied by the pop-up.
| Observation | Likely constraint | Action |
|---|---|---|
| Pop-up changes size, but both tables retain their old width | A parent or child has a fixed width or minimum width | Trace the container chain and remove the fixed constraint where responsive sizing is required |
| Dragging the window fixes both tables | The initial parent measurement was stale | Keep size in the opening position so the first layout receives final geometry |
| A horizontal scrollbar remains on the smaller display | Table content or columns require more width than the table receives | Review column sizing before changing the pop-up again |
| Only one table expands | The siblings have different flex growth, shrink, basis, or minimum-size behavior | Compare their layout properties side by side |
Work from the pop-up inward. A responsive window cannot overcome a fixed intermediate container, and a responsive intermediate container cannot overcome a table whose content establishes a larger minimum width.
Gate check: Temporarily apply visibly different backgrounds to the root and table container. Confirm that both colored regions fill the pop-up immediately at each test resolution.
Make both alarm tables share the flex space
Use matching flex rules for the two alarm tables. A 50% basis gives each sibling an equal starting allocation, but basis alone does not decide the final size. Growth, shrink behavior, minimum dimensions, gaps, margins, borders, and scrollbars also participate in the calculation.
Check the following in order:
- Compare the two table components and make their flex settings identical unless the design intentionally favors one table.
- Check both tables for fixed or strict column widths. A set of columns that cannot shrink may force overflow even when the table component receives half the container.
- Account for any container gap, margin, or border. Two halves plus additional horizontal space can exceed the parent width.
- Check minimum widths on the tables and their wrappers. A minimum greater than half of the small display prevents equal sharing.
- Retest without custom scrollbar styling. This separates table sizing from CSS decoration.
Do not tune basis against one large monitor until it looks right. Use the smallest required display as the limiting case, then verify that the same configuration expands cleanly on the larger display.
Gate check: At the smallest target resolution, confirm that both tables divide the intended region on first open and that no manual drag is needed.
Trace the white header block to the scrollbar
A white block at the right end of a table header usually belongs to the scrollbar reservation or corner area rather than an alarm column. First determine whether the block width matches the vertical scrollbar. Toggle enough alarm rows to make the vertical scrollbar appear and disappear. If the block follows the scrollbar, correct the scrollbar or corner styling; changing column widths will not remove it reliably.
Custom webkit-scrollbar styling can change the track and thumb while leaving the corner or reserved gutter on its default background. Disable that customization for one test. If the block disappears, restore the rules one at a time and give every visible scrollbar region a background that matches the table header or body as appropriate.
If the block remains when no vertical scrollbar is present, inspect the table header and its final column. Look for a fixed column total that leaves unused width, a header/body width mismatch, or a wrapper that is wider than the rendered columns.
Gate check: Test once with few rows and once with enough rows to require scrolling. The header edge must remain visually continuous in both states.
Prove the complete opening sequence
Run the final test through the production navigation path, not only from the designer. The opening script, session viewport, alarm volume, and custom styles must all participate.
- Open the pop-up on the smallest supported display and do not resize it manually.
- Confirm that the percentage-based outer dimensions are correct.
- Confirm that the root container fills the available area.
- Confirm that both alarm tables share the intended space and show usable columns.
- Generate or load enough rows to exercise vertical scrolling.
- Close and reopen the pop-up to test the initial render again.
- Repeat the same sequence on the larger display.
A successful test has no delayed snap, no dependency on a border drag, no startup margin change, and no binding refresh used as a layout trigger.
Gate check: Repeat several cold opens at both resolutions. The first rendered frame must match the settled layout every time.
FAQ
How do I resize an Ignition Perspective pop-up by screen size?
Pass percentage values such as 'height': '30%' and 'width': '60%' through the position argument of system.perspective.openPopup. This establishes responsive dimensions as the pop-up opens.
How do I stop alarm tables from resizing only after I drag the pop-up?
Remove child refresh workarounds and set the outer dimensions in the opening position. Then remove fixed dimensions in the container chain so the tables receive the correct initial parent size.
How do I split two alarm tables evenly in a flex container?
Give both tables matching flex settings and use 50% as their basis. Check growth, shrink, minimum width, gaps, margins, borders, and strict column widths before treating basis as the fault.
How do I remove the white block beside an alarm table header?
Check whether it appears with the vertical scrollbar. Disable custom webkit-scrollbar styling, then restore its rules individually and match the scrollbar corner or reserved area to the surrounding background.
How do I verify pop-up scaling before release?
Cold-open the pop-up repeatedly at the smallest and largest supported resolutions, then test with and without enough alarm rows to create scrolling. Pass only when the initial frame is correct without dragging the border.
Stop here if the outer pop-up opens at the requested percentage size but the same unmodified alarm table still reports different geometry across identical sessions, or if removing all custom scrollbar styling leaves a repeatable rendering defect. Record the display resolution, browser environment, project export, opening script, and screenshots before escalating through the manufacturer's official support channel.