图抵千言万语,基本上困扰我的是下面这个问题:
很抱歉文字模糊不清,但公司政策不允许我透露太多。正如您从屏幕截图中看到的,我有一个下拉菜单(设置为dropup),它不是完全可见的。当数据网格具有大量数据时,这对大多数行不是问题,但对于前几行或数据网格中只有几个数据时,这总是问题。
我添加了一些用于JSBin的代码(不是一个工作示例),但只添加了部分代码,因为,嗯,公司策略。我希望所提供的代码至少有一点有用。请注意,这是用React bootstrap构建的。我包括了一些使用的JSX,以及与数据网格和项目编译时可见的HTML相关的CSS类。
https://jsbin.com/wuvuhemewo/edit?html,css,js,output
我甚至不记得我尝试过的每一件事,从几乎所有地方调整Z索引(绝望的时候需要绝望的措施)到尝试我在google上找到的每一个可能的解决方案和这里的堆栈溢出。
下面是我展开害羞选项“Dropup”菜单后得到的结果:
<div class="datagrid__options-btn show dropup">
<button aria-haspopup="true" aria-expanded="true" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button>
<div x-placement="top-start" aria-labelledby="dropdown-basic-button" class="dropdown-menu show" style="position: absolute; top: auto; left: 0px; margin: 0px; right: auto; bottom: 0px; transform: translate(2.4px, -16px);" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="top-start">
<a href="#" class="dropdown-item" role="button">Option1</a>
<a href="#" class="dropdown-item" role="button">Option2</a>
<a href="#" class="dropdown-item" role="button">Option3</a>
<a href="#" class="dropdown-item" role="button">Option4</a>
<a href="#" class="dropdown-item" role="button">Option5</a>
<a href="#" class="dropdown-item" role="button">Option6</a>
<a href="#" class="dropdown-item" role="button">Option7</a>
</div>
更新:同时我发现Overflow-X正在“吞噬”下拉菜单。当我把它从这两个中移除:
<div class="dg-table__wrapper">
<div class="table-responsive">
下拉列表变得可见,但现在datagrid太宽,任何添加溢出的尝试都将吃掉下拉列表。我在堆栈溢出:https://stackoverflow.com/A/6433475上找到了这一点
难道这就是这里的问题吗?
995faf8e76605e973回答https://stackoverflow.com/A/63633030/14181063有帮助!这是修改我的代码后的样子:
const popperConfig = {
strategy: "fixed"
};
<Dropdown id="dropdown-basic-button" drop="up" className="datagrid__options-btn">
<Dropdown.Toggle variant="link">Options</Dropdown.Toggle>
<Dropdown.Menu popperConfig={popperConfig}>
{row.options.map((action, i) => {
return (
<Dropdown.Item
key={i}
onClick={(e) => {
e.preventDefault();
functions.doAction(action, row.originalIndex);
}}
>
{action}
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
同时,我还发现在DropdownButton元素中添加style={{position:“static”}}也是有效的!不过,我将坚持95faf8e76605e973发布的解决方案,因为它似乎更正确:)
<DropdownButton
id="dropdown-basic-button"
title="Options"
variant="link"
drop="up"
style={{ position: "static" }}
className="datagrid__options-btn"
>
您是正确的,这个问题是因为overflow
CSS属性。文档中没有详细说明,但您可以利用dropdown.menu
的适当popperconfig
,使菜单具有CSS属性position:fixed
,并借助React引导程序使用的popper.js实现动态定位。
const popperConfig = {
strategy: "fixed"
};
return (
<div style={containerStyle}>
<Row>
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Fixed Popper
</Dropdown.Toggle>
<Dropdown.Menu popperConfig={popperConfig}>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Item href="#/action-4">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
...
Codesandbox:https://codesandbox.io/s/react-bootstrap-fixed-dropdown-popper-FQDNU?file=/src/app.js
放置方向:https://react-bootstrap.netlify.app/components/dropdowns/#drop-directions
在我链接的同一个popper.js文档中,还有其他一些有用的技术,比如使用诸如Prevent Overflow这样的修饰符--这可能是该问题的替代解决方案。它归结为开发人员的UX视角。
此外,下面是我最近编写的关于使用Reactstrap
而不是React-bootstrap
的替代解决方案:Reactstrap DropdownMenu底部溢出问题
我想在Android系统上创建一个组之间有分隔符的菜单(菜单内)。我已经为每个组使用了不同的ID,它工作得很好。 像这样的东西: 请注意,表示组之间的分隔符。 但我想要以下菜单: 因此,我试图实现一个组,在菜单顶部有一个隐藏项,但运气不佳,因为它不显示任何内容。 我还尝试过在菜单顶部添加一个带有“假”文本的组。这样地: 但现在菜单显示为空白,而不是仅显示分隔符: 那么,我怎样才能在菜单顶部以正确的
本文向大家介绍Jquery EasyUI Datagrid右键菜单实现方法,包括了Jquery EasyUI Datagrid右键菜单实现方法的使用技巧和注意事项,需要的朋友参考一下 最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能 用户在每次使用的
我使用BottomNavigationViewEx库在我的android应用程序中显示底部菜单栏,该库运行良好并修复了标准BottomNavigationView的许多缺点。 问题是,根据要求,我需要在菜单中显示7个选项,其中4个选项是对各自功能的直接访问,还有一个“更多”选项,该选项应该显示一个包含3个以上选项的子菜单(类似于一个工具栏,其中包含属性为showAsAction=“never”的项
我在顶部菜单中添加了组件,有一个按钮,这是容器的主要组件。但是单击任何一个按钮或其他组件都没有效果。我怎么才能让它起作用?此外,我已经浏览了一个在顶部菜单中的南方组件的博客。我已经将cn1更新到8.1,它给出了“您的项目库是最新的”,但我仍然不能使用它(setComponentToSideMenuSouth)。我想让组件保持在侧菜单的顶部,那么setComponentToSideMenuNorth
定义 弹层按钮提示二次确认操作。 图片展示 代码演示 import Dialog from 'pile/dist/components/dialog' const {NConfirm } = Dialog <NConfirm show={true} title="同时会将我从对方列表列删除" hide={...fun} buttons=[ { label: '分享',
首页导航 (导航能够有效帮助粉丝跳转到各个关键页面,是整个店铺的“指南针”。) 1.首页导航包括:批量删除、添加导航栏、导航名称、链接地址、是否显示、创建时间、排序和对某一个首页导航的修改以及删除。 2.添加导航所设置的信息包括导航名称、排序号、链接地址、是否新窗口打开、是否显示和上传导航图标。链接地址的商城模块包括首页、限时折扣、品牌列表、积分中心、领券中心、团购专区、专题活动、会员中心和购物车