In Firefox it seems the vertical position is recalculated when the item is redisplayed from display:none (however the same bug can be seen if hover is maintained during scrol l). scroll has no effect on the vertical position of the submenu in Chrome. In Chrome, the submenu is positioned correctly when the menu is not scrolled, however when the menu is scrolled the browser seems not to recalculate the vertical position, and the submenu is displayed where the menu list item was prior to scrolling. However, this seems to cause the browser to incorrectly position the submenu. To preserve the vertical position of the submenu (attached to the menu item), I use top:auto. I must use position:absolute on the submenu in order to get it display outside the bounds of the scrollable list. I attempted to use the recommended “solution” technique, but found it not useful as I couldn’t solve the problem of getting the submenu to be positioned according to its parent menu item. panel selector can clip this element */įrom John Pearse, sent to me after the comments had closed:
#React.js overflow x scrolll code
Or, even better, perhaps we could specify the clipping parent by a CSS selector: /* Fair warning: not real code */ * only an ancestor 2 levels up can clip this element */ It’d be nice if we could specify a clip depth, which would control which ancestor in the hiearchy would be responsible for clipping a particular element. Unfortunately, this method of showing items that would otherwise be hidden is very obscure. Now we can have as many levels of nested submenus as we want, and we won’t get any undesired clipping. See the Pen Scrollable menu with pop out submenus by Agop ( on CodePen.Īnd that’s it! Since neither the menus nor the menu items are positioned, the submenus are able to pop out of the hidden/scrollable overflow. Then, whenever the user hovers over a menu item, we can position the submenu wrappers using a bit of JavaScript: Knowing this, we can add a wrapper around the menus to act as the closest positioned ancestor for each submenu. See the Pen Scrollable menu with pop out submenus (step 1) by Agop ( on CodePen.īasically, in order for an absolutely positioned element to appear outside of an element with overflow: hidden, its closest positioned ancestor must also be an ancestor of the element with overflow: hidden. In this case, they don’t have a positioned ancestor, so they’re positioned relative to : Interestingly enough, if we omit the position: relative from the menu items, the submenus do show up, positioned based on their closest positioned ancestor. So we can’t have visible horizontal overflow if the vertical overflow is invisible, and vice versa.Īnd if we can’t have visible horizontal overflow, we can’t have our pop out submenus! The Solution The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. If we look at the W3C spec, we find the following explanation: What gives? Why do we still get scrollbars? The Problem See the Pen Scrollable menu with pop out submenus (broken #2) by Agop ( on CodePen.
Oh, of course, we used overflow: auto – perhaps if we use overflow-x: visible, the horizontal overflow of the submenus will be visible: See the Pen Scrollable menu with pop out submenus (broken) by Agop ( on CodePen.
So you’re tasked with creating a scrollable menu with submenus that pop out when you hover over a parent menu item.Ĭreate a list for the menu, add some nested lists for the submenus, position the nested lists based on their parent list items, voilà! You’d think that’s what overflow-x and overflow-y are for, but it’s not that simple. Agop ran into an interesting scenario where he needed an element to be scrollable in one direction, while allowing the overflow in the other direction. The following is a guest post by Agop Shirinian. So, my issue is, I can't get the table inside of the Histor圜ontainer.jsx to have a scrollbar, even with the styling in the. Histor圜ontainer.jsx import React from 'react' Įxport default class Histor圜ontainer extends React.Component I currently have the following React JS component: I only mention this, just in case there is some kind of conflict with skeleton and scrolling tables that I don't know about.
I am having an issue trying to get a scrolling table to work in React JS.
0 kommentar(er)
