Position:fixed IMO isn't a good way around this. Scroll down, grab something and then return to select our option.Ī successful solution personally was to use data attributes to link theĬontent and display it correctly using position:absolute. I have worked on systems like this where by say a grid of content hasĭynamically generated dropdowns for each item for example, we open theĭropdown but then say we couldn't remember something so we needed to Also there may be an instance and I can vouch as Scrolling as this makes it messy and is unnecessary, it should close onĬlick and not scroll. You don't need to add an event to listen for Parent button will move but the dropdown content wont, hence why the That is true it should, but this can be achieved by using positionĪbsolute and attributes as stated previously in this issue.īy making it fixed, if the user scrolls when the dropdown is open the
Reply to this email directly or view it on GitHub.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. dropdown-menu would have to be positioned with JS, like the tooltip, and I don't know what problems would be introduced by shipping the ul.dropdown-menu elsewhere in the DOM, even temporary. Therefore since the viewport isn’t cutting it off, the overflow becomes irrelevant. I implemented drop downs in rows of a grid, all those drop down containers would have the same class so a suitable yet clever way of maybe supplying the xpath in the data attribute to be sure the correct drop down is shown and there's no duplication is best IMO.ĭropdowns experience the same clipping problems as tooltips, so one solution would be to allow specifying data-container="body", as you can with tooltips. However, you have to be careful with this. The suggested linking things with the data attribute and toggling a hide class on click is nice and I've implemented this on components previously. 1 The only thing to do is to reorient the elements so that the element that was the relatively positioned parent is now a sibling which mostly defeats the purpose. It’s just hidden or cut as it was described on StackOverflow. If ($(this).parent().Depends on whether you have control over the CSS of the container I suppose. Not in an underneath another element way. I just wrote some code which I think does what you're looking for:
0 kommentar(er)
