p-sectionLinks h-scroller css overflow issue for link content wider than 1200px

Affected version
2.2

bzcomputers

Well-known member
If the total displayed length of links contained within <div class ="p-sectionLinks"> exceeds 1200px there is a css overflow issue. The text overflow is still "visible" beyond the .p-sectionLinks-inner which has a max-width: 1200px. It appears the current css applies "overflow: visible" to all screens wider than 768px, which will not work for screens greater than 1200px without breaking the inner width constraints and also possibly creating a full page horizontal scroll.

To duplicate you will need a screen width greater than 1200px and just add additional section links to get the text on the line to overflow 1200px, you will then see the initial overflow issue. Keep adding links to be wider than your max screen width to view the full page horizontal scroll issue that can also be caused.
 

bzcomputers

Well-known member
same thing with <div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">

...current css applies "overflow: visible" to all screens wider than 768px which will not work when total link widths exceed 768px

-----------------
* - rechecking this second overflow issue instance. This second report may not be an issue, only seems to appear when inspecting, page refresh seems to fix overflow in this case, will report back
 
Last edited:
Top