2.0.12-v.2 - horizontal scroll bar in Extended Family tab

[TheDutchJewel]

When using the Extended Family module, a horizontal scroll bar is always visible at the bottom of the Extended Family tab:

It doesn't matter which individual is selected.

This only occurs with the Rural theme, not with the standard themes.

Tested with webtrees 2.0.16, Rural theme 2.0.12-v2 and Extended Family module v2.0.16.10.

Can this be solved?

[jon48]

Hello,

There is indeed a conflict between the style in the Extended Family module and the Rural theme:

• The Rural theme use the Boostrap table-responsive class for the tabs, in order to increase responsiveness (which is not the case of the standard themes). This native class comes with the overflow-x: auto properties, which triggers the scrolls when the content does not fit within the container.
• The problem comes from the fact that within the Extended Family tab content hierarchy, some elements defines margins which are not balanced by any previous paddings in the parent elements (#_hh_extended_family_ h2, #_hh_extended_family_ h3, #hh_extended_family_content), effectively extending the content outside of the frame of the tab-pane element. I have tried to illustrate (probably badly) the slight overflow in the image below, with at the top the area defined by the #hh_extended_family_content, and the bottom the one defined by tab-pane : the whole area at the top (blue + orange) should be contained within the blue area at the bottom, the difference can be seen between the blue line (frame of the overflow) and the red line (content of the module).

I am not going to fix that one in the theme, as I feel this would be too risky to try and adjust the native table-responsive class for a non-standard module.

This can probably be fixed in the Extended Family module a couple of different ways:

• either reviewing the margin/padding structure, to make sure that the tab content never extends beyond the tab-pane element. I am wondering for instance whether defining a padding of 10px at the wt-tab-hh-extended-family parent element level would not be safer than setting margins in children elements.
• a very specific fix could be probably done in the CSS file (resources/css/hh_extended_family.css) by adding the line

  .wt-theme-_myartjaub_ruraltheme_ #_hh_extended_family_ { overflow-x: hidden; }

[TheDutchJewel]

Thanks for the detailed description of the problem, and for the solution.

Hermann already fixed the problem in his module.