search

mavoweb / mavo

Create web applications entirely by writing HTML and CSS!
https://mavo.io
MIT License
2.84k stars 177 forks source link

mv-item-bar is hidden if overflow: hidden is declared on mv-multiple element #701

Open synicalsyntax opened 3 years ago

synicalsyntax commented 3 years ago

Example

Due to the relative positioning of the item bar relative to the mv-multiple element, it gets hidden when overflow: hidden is declared, making it impossible for users to access the item bar.

LeaVerou commented 3 years ago

This would be quite difficult to fix properly. 😞

Basically, the only way to fix it today (in the future we may be able to use <popup>) would be to place the item bar outside the element it's about, e.g. as a child of <body>. We do this for editing popups, for the same reason. However, in certain Mavos, authors style the item bars to be always visible (example), so that approach wouldn't work.

One heuristic could be to first try appending inside the element, inspect the computed style, see if the bar is always visible, and leave it there if so. Another heuristic could be to only append it to <body> if the parent (or any ancestor?) has overflow: hidden. However, both of these heuristics, and any heuristic of that type:

  1. Can be subject to race conditions (e.g. the style wasn't applied at the time it was inspected, but later)
  2. Cause seemingly unpredictable behavior ("why is my item bar inside the item in this collection and not in this other one?!?)
  3. Will complicate the codebase. This is fine when the change leads to a clear UX improvement for HTML authors or users, and the complication is commensurate with the improvement, but I'm not sure that's the case with this.

Since today there are fewer reasons to use overflow: hidden when you don't actually want to clip overflow (in the bygone float-based layout era it was also used to contain floats), I suggest we mark this Wontfix and advise authors to just not use it on collection items and ancestors thereof, or to style item bars to be contained in the element if they really need to use overflow: hidden.

Thoughts?

synicalsyntax commented 3 years ago

Basically, the only way to fix it today (in the future we may be able to use ) would be to place the item bar outside the element it's about, e.g. as a child of .... Will complicate the codebase.

This echoes my experience with dynamically-generated, absolutely-positioned tooltips as well. There's a lot of complicated calculations on the JS side that seem bothersome to implement.

I suggest we mark this Wontfix and advise authors to just not use it on collection items and ancestors thereof, or to style item bars to be contained in the element

Taking your suggestion, I resolved my personal usecase by reorganizing the DOM like so (pulling out the item bar out of the overflow: hidden parent and making them siblings):

<div property="item" mv-multiple>
    <div class="mv-item-bar mv-ui"></div>
      <div class="content" style="overflow: hidden">
          <div property="body" class="tinymce"></div>
      </div>
</div>

Hopefully a similar approach would work for anyone else that approaches this issue in the future. So I'm fine with marking this a wontfix, but I think it's important to note this caveat in the documentation!

LeaVerou commented 3 years ago

That works too. But just curious: why did you need overflow: hidden in the first place? What were you trying to hide?