xtermjs
Auto fit addon doesn't work when parent element uses border-box
The calculations for height and width of the parent in the auto fit plugin are incorrect when the parent element uses box-sizing: border-box. This is because the computed height includes the padding but the content does not.
The right implementation might be to get the client height of the parent element using gBCR and then subtract the parent padding.
/CC @taion
@cancan101 Are you sure it's failing on box-sizing: border-box? I would have thought that it might fail with box-sizing: content-box 🤔
It's for border-box. Suppose you have an element with height: 100px and padding: 20px 0 0 0.
If we have box-sizing: content-box, then the computed height style is 100, which is correct.
If we have box-sizing: border-box, then the computed height style is still 100, but the actual content height is 80.
Instead it needs to be client height minus padding to account for this (I think, unless there's a more direct way to read content height).
Open to PRs, you can repro this in the demo by adding box-sizing: border-box to #terminal-container. The fix will probably need to check for border-box on the container, if it's there include border and padding style values in the calculations.
This bug just hit me again but this time I decided to actually investigate the reason and found this issue. Setting box-sizing: content-box for #term-container indeed fixed the issue for me (bootstrap set * to border-box).
This issue may be fixed / worked around with using one of two different approaches:
- either the proper way as concluded by @Tyriar
- or by setting box-sizing: content-box on this._terminal.element.parentElement while loading the addon
At the very least it should be documented here https://xtermjs.org/docs/api/addons/fit/
