New CSS height rule set as !important is forbidding css resize usage

[FredZinelli]

Hello,

Issue summary

In the last release a css rule has been set to !important and it just broke the possibility to offer manual resizing to users through the resize css rule : since the resize functionality is working by assigning on the fly the height on the element itself, without using the !important flag, it's not possible to override the rule coming from the jQuery terminal.

Expected behavior

When the terminal is embedded in a page, adding a resize css rule to it should work, like it did in previous versions.

Actual behavior

The height of the terminal is locked and only its content (number of lines) is making the terminal's height change.

Capture.video.du.07-09-2024.22.48.50.webm

(you won't see my mouse, but you'll see the height value changing on the element when I try to resize it manually)

Additional notes

The problematic rule is this one css/jquery.terminal.css, line 843 (the change got published today, apparently) :

@supports (--css: variables) {
    ...
    terminal {
        ...
        height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px)) !important;
    }

The comment above the rule suggests it will apply only when some variables are defined (btw, --cols doesn't appear in that rule), but it's not the case: I don't have a --rows variable defined, but it still applies and is forcing the terminal to resize depending on the number of lines of the content (without limits => none of the other calculations are applying anymore)

Can we get the !important removed, please?

Cheers

[jcubic]

Thanks for the report. Will check if I can remove it. I think that I added it to overwrite inline height.

[FredZinelli]

Thx, As you can see below, this new behavior makes the UX kinda horrible in my project, so I hope you can remove it.

Capture.video.du.08-09-2024.00.04.29.webm

(before the change, the height was constant, in addition to the user being able to change it to better fit his use)

[jcubic]

Will check tomorrow, for now you can use fixed height with !important and if you don't have any height use height: auto !important.

This also seem to break the height of the main demo on the website, so I will get rid of it if I can.

[jcubic]

The fix was added in version 2.43.1