Pedigree chart left arrow does not show all children

[makitso]

There are eleven children of Johannes and Geertje yet the dropdown only showes one. The position of the dropdown should move up to show all and not go outside the current frame

[Bogiegit]

It seems to happen here: aria-labelledby="pedigree-previous-link"

[Bogiegit]

There seem to happen a similar issue with the other pull down menu here: aria-labelledby="#chart-box-menu-id-a212d94fa303482687f52111bd233537"

[fisharebest]

The popup menus are created by the popper.js library. When they are within a scrollable <div>, they are cropped to the div.

There are lots of configuration options for this library (although we use it indirectly through bootstrap). Maybe there is something we can adjust?

Alternatively, we might be able to adjust the z-index for the popup. However, adjusting z-index values often brings unwanted side-effects.

[Bogiegit]

html,body{background-color:#fff;color:#333;line-height:1.4;font-family:sans-serif,Arial,Verdana,Trebuchet MS;}Thank you for your information. It seems there is a difference in handling. The same popup menu called from the pedigree icon on the right side of the boxes used in the pedigree diagram is cropped while it isn't when called in the family book diagram. Bogie   Greg Roach schrieb am 26.10.2022 11:38 (GMT +02:00):

The popup menus are created by the popper.js library. When they are within a scrollable

, they are cropped to the div. There are lots of configuration options for this library (although we use it indirectly through bootstrap).Maybe there is something we can adjust? Alternatively, we might be able to adjust the z-index for the popup. However, adjusting z-index values often brings unwanted side-effects. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[makitso]

There hasn't been any movement on this issue, still exists. Any fix on the schedule?

[hede5562]

As a workaround, try to change the wt-page-content class in your CSS theme. For example in public/css/webtrees.min.css

from: .wt-page-content{margin-top:1rem} to: .wt-page-content{overflow:visible;margin-top:1rem}

[fisharebest]

This element contains the following CSS classes, in addition to wt-page-content:

.wt-chart-pedigree {
    overflow-y: auto;
}

.wt-chart {
    overflow-x: auto;
    overflow-y: hidden;
}

Although the proposed change fixes the popup-menu visibility, it also overrides the other markup. This breaks horizontal scrolling of wide charts.

The markup on .wt-chart-pedigree looks like it is designed to fix this problem - but it doesn't.

[hede5562]

It was never meant to fix the problem, it's just a workaround. It's a "works for me", not a solution for all. And maybe an even better workaround is to use "auto": .wt-page-content{overflow:auto;margin-top:1rem}

This way it seems to work for both directions. Yet instead of having scrollbars on this inner element I'd prefer to have the page itself to be bigger and maybe have scrollbars at the page level, if something doesn't fit. And I'd prefer to have the popup menu overflow the footer, but let the other content not overflow. But I don't know how to do so. I'm not an html/css expert so someone else undoubtedly is more qualified than me to check the structure of the page and fix this.

[fisharebest]

My comments weren't intended as a criticism - just documenting my investigations for when I next look at this issue.