search

cayhorstmann / codecheck2

Merging CodeCheck checker and Play server
GNU Affero General Public License v3.0
11 stars 29 forks source link

No horizontal scrollbar in overflowing assignment #44

Open jmr-ua-pt opened 1 year ago

jmr-ua-pt commented 1 year ago

When viewing the large output of a CodeCheck problem like this one, scrollbars (vertical and horizontal) appear. (Edit URL)

However, if this exercise is part of an assignment, then only the vertical scrollbar is visible. (Private URL)

I tracked this to the overflow: hidden style of the <body> element of the CodeCheck problem document embedded in the assignment's <iframe> element.

(I wrongly reported this in the ltihub project, more than 2 years ago.)

cayhorstmann commented 1 year ago

I've deactivated overflow:hidden in the staging site (codecheck.me) and this seems to work now. I am a bit concerned that now scrollbars will appear when they are unwanted, but it seems the doc height messages actually take care of that in this example.

jmr-ua-pt commented 1 year ago

It seems to be working now both in codecheck.me as well as codecheck.io.

However, I noticed that on Brave (a Chrome-based browser), two vertical scrollbars appear.

This is a minor problem, but I managed to eliminate the inner scrollbar by setting overflow-y: hidden in the <body> element of the embedded problem, as shown in the screenshot below. On Firefox it works either way.

Screenshot

cayhorstmann commented 1 year ago

I see...Chrome shows scroll bars to put an n-pixel high doc into an n-pixel high iframe. That's probably why the overflow was hidden in the first place. I now add 16 pixels for Chrome-based browsers.

jmr-ua-pt commented 1 year ago

It continues to work, but I still get double scrollbars in Brave (Chrome).

Screenshot from 2023-05-11 10-40-38

That's not much of a problem and I'm not sure if forcing overflow-y: hidden will bring more problems in other browsers. If it works fine with other browsers, I'd consider the bug fixed.

Thanks.

cayhorstmann commented 1 year ago

I see that the doc height is 599px, and the iframe has a height of 618px. Can you edit the iframe style by hand and see if a greater height will make the scroll bars go away? If so, at what threshold?

jmr-ua-pt commented 1 year ago

OK, I tried increasing the <iframe> style height progressively and eventually (at exactly height: 630px) the inner vertical scrollbar disappears.

Screenshot from 2023-05-11 14-18-07

I checked that the embedded document's <body> element had no overflow set and kept the same dimensions as in my previous screenshot: margin: 8; height: 591 and width: 705 if inner scrollbar visible, or width: 720 when it disappears.

cayhorstmann commented 1 year ago

Weird... I'll just set the fudge amount to 32.