filter dropdown should have max height

This commit is contained in:
afc163 2015-12-10 12:13:13 +08:00
parent 397cfc96c0
commit b4789e585d
2 changed files with 25 additions and 7 deletions

View File

@ -61,15 +61,15 @@ let FilterMenu = React.createClass({
if ('filterMultiple' in column) { if ('filterMultiple' in column) {
multiple = column.filterMultiple; multiple = column.filterMultiple;
} }
let menus = <Menu multiple={multiple} let menus = <div className="ant-table-filter-dropdown">
<Menu multiple={multiple}
prefixCls="ant-dropdown-menu" prefixCls="ant-dropdown-menu"
className="ant-table-filter-dropdown"
onSelect={this.setSelectedKeys} onSelect={this.setSelectedKeys}
onDeselect={this.setSelectedKeys} onDeselect={this.setSelectedKeys}
selectedKeys={this.state.selectedKeys}> selectedKeys={this.state.selectedKeys}>
{this.renderMenus(column.filters)} {this.renderMenus(column.filters)}
<Menu.Divider /> </Menu>
<Menu.Item disabled> <div className="ant-table-filter-dropdown-btns">
<a className="ant-table-filter-dropdown-link confirm" <a className="ant-table-filter-dropdown-link confirm"
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
@ -86,8 +86,8 @@ let FilterMenu = React.createClass({
onClick={this.handleClearFilters}> onClick={this.handleClearFilters}>
{locale.filterReset} {locale.filterReset}
</a> </a>
</Menu.Item> </div>
</Menu>; </div>;
let dropdownSelectedClass = ''; let dropdownSelectedClass = '';
if (this.props.selectedKeys.length > 0) { if (this.props.selectedKeys.length > 0) {

View File

@ -221,11 +221,29 @@
.@{table-prefix-cls}-filter-dropdown { .@{table-prefix-cls}-filter-dropdown {
min-width: 96px; min-width: 96px;
margin-left: -8px; margin-left: -8px;
background: #fff;
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
box-shadow: @box-shadow-base;
.ant-dropdown-menu {
max-height: 220px;
overflow: auto;
border: 0;
box-shadow: none;
}
.ant-dropdown-menu-item { .ant-dropdown-menu-item {
overflow: hidden; overflow: hidden;
} }
.ant-dropdown-menu-item a&-link { &-btns {
overflow: hidden;
padding: 7px 15px;
border-top: 1px solid @border-color-split;
}
&-link {
color: @link-color; color: @link-color;
&:hover { &:hover {
color: @link-hover-color; color: @link-hover-color;