Element content not rendered when using Element.scrollbarY inside of an Element.inFront attribute

[staeter]

We set a height of 550px but we get an effective height of 6px (= border width) I believe because the content isn't rendered.

The issue happen whenever you give Element.scrollbarY or Element.scrollbars to an element inside of an Element.below, onRight, onLeft, behindContent or inFront attribute.

I made an ellie as explicit as I could to show the issue.

Expected behavior
The height set by Element.height should prevail in any case.

[Yarith]

I experimented a little bit with the ellie. I found out, that the buggyElement gets a flex-shrink: 1. If i understand it correctly, this gives it the height of the parent element. So if you set it to flex-shrink: 0 directly on the element it will work, but correctly only when combined with Element.height <| Element.px 200 and Element.height Element.shrink and ommited (means shrink). The flex-shrink should not be changed to zero for Element.height Element.fill.

I have written a short css which will override with flex-shrink: 0 for the vertical scrollbar cases inside Element.behindContent, Element.inFront, Element.below, Element.onLeft and Element.onRight. If the height is set to Element.fill it will not change anything. See the comment for explanation what it does.

/* Workaround for: https://github.com/mdgriffith/elm-ui/issues/326
   Any direct element inside Element.behindContent (.nb.bh) with a vertical scrollbar and is not filling in height 
   will again have the flex-shrink set to 0, which would be otherwise set to 1 by the .s.sby.e alone.
   This will also be applied for Element.inFront (.nb.fr), Element.below (.nb.b), Element.onLeft (.nb.ol), 
   Element.onRight (.nb.or).
*/
/* 2021-10-28 12:21: Added also rules for Element.scrollbars (.sb), 
   because .sby is only for Element.scrollbarY. I think for 
   Element.scrollbarX is no fix necessary. */
    .nb.bh > .s.sby.e:not(.hf),
    .nb.bh > .s.sb.e:not(.hf),
    .nb.fr > .s.sby.e:not(.hf),
    .nb.fr > .s.sb.e:not(.hf),
    .nb.b > .s.sby.e:not(.hf),
    .nb.b > .s.sb.e:not(.hf),
    .nb.ol > .s.sby.e:not(.hf),
    .nb.ol > .s.sb.e:not(.hf),
    .nb.or > .s.sby.e:not(.hf),
    .nb.or > .s.sb.e:not(.hf)
    {
      flex-shrink: 0;
    }

See the updated ellie with the workaround applied here: https://ellie-app.com/fH9XjxS9mw5a1

I have not tested this outside of this ellie and have not checked if it would break other stuff.

At this point of writing i remembered about the Element.minimum and Element.maximum. If you set it to Element.height <| Element.minimum 200 Element.shrink or with Element.fill it works also without the workaround. Also for Element.maximum. The css workaround above is also not applied in those cases. Maybe the correct fix could also lay around flex-grow, which is set to 100000 by .nb.e > .hf in those cases. I have no experience in the flex system, so i can not tell. The only thing i saw, was, that without vertical scrollbar the element has flex-shrink: 0.

[staeter]

The fix doesn't work in my specific use-case. The flex-shrink: 1 is higher priority.

The simplest way I found to fix it was to give Html.Attributes.style "flex-shrink" "0" |> Element.htmlAttribute to every element with Element.scrollbarY or Element.scrollbars.

[Yarith]

I have updated the css in my post above. It has only worked with Element.scrollbarY (.sby) and not Element.scrollbars (.sb). I see in your screenshots, that you have used Element.scrollbars. Seems so, that i forgot to test it with Element.scrollbars yesterday. The new css should fix it also for your case. I think for Element.scrollbarX (.sbx) is no code/fix necessary.

[staeter]

Yes the fix works fine now thanks @Yarith !