whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
8.15k stars 2.67k forks source link

When details element is open, it would be helpful to have an upward pointing triangle at the end of the text (to allow it to be closed) #10741

Open JimLewis opened 1 week ago

JimLewis commented 1 week ago

What problem are you trying to solve?

We are using details element to make log files for EDA tool output human manageable. For each step in a regression run, a details element is used with the summary tag highlighting what operation was done and the rest of the details has the tool output. It is working well. The issue is when the details is opened to explore the issue, one typically scrolls through 100's of lines of text and then wants to close it after getting to the end.

What solutions exist today?

?

How would you solve it?

Add an upward pointing triangle (either automatically at or via another html element) that allows the details to be closed from the bottom of the text - rather than scrolling back up through the text.

Anything else?

Current details element has been working brilliantly - I am able to render a log file that is 100K+ lines (regression run) in seconds, where as opening a raw log file in an editor is painfully slow when it gets this long. We also use HTML summary files (similar to JUint XML) to help identify failing tests, however, when investigating test failures, having the detailed test output in an html based log file has been helpful.

nektro commented 1 week ago

adding position: sticky; top: 0; to the <summary> may approach the experience you're looking for

JimLewis commented 1 week ago

@nektro That certainly does something. Having it float on top of other text is a really disorienting at best - mostly unreadable when layered over other text.

OTOH, demarking the end of the details would be better - and more clear as to where it ends and where the next independent text begins.

JimLewis commented 1 week ago

It can be made readable if the colors are adjusted when "details[open" - this removes the disorientation with the text overlay ...

It still would be better with an end marker.

nektro commented 1 week ago

mostly unreadable when layered over other text.

i didnt include it in my last message because i didnt want to be prescriptive about the existing style of your page, but you likely also need to set a background-color, border, and/or padding, margin, etc to make it look nice and cohesive with your styles