Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown max height #2109

Merged
merged 5 commits into from
Jul 6, 2022
Merged

Dropdown max height #2109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
10cf4d4
Added maxHeight to Dropdown
AnnMarieW Jun 29, 2022
657b0cd
Changelog
AnnMarieW Jun 29, 2022
77186c7
update after review
AnnMarieW Jul 6, 2022
ed35f76
update after review
AnnMarieW Jul 6, 2022
ebc60ef
Merge branch 'dev' of https://github.com/plotly/dash into dropdown-ma…
AnnMarieW Jul 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).

## [UNRELEASED]

### Added
- [#2109](https://github.com/plotly/dash/pull/2109) Add `maxHeight` to Dropdown options menu.

### Fixed
- [#2102](https://github.com/plotly/dash/pull/2102) Fix bug as reported in [dash-labs #113](https://github.com/plotly/dash-labs/issues/113) where files starting with `.` were not excluded when building `dash.page_registry`.
- [#2098](https://github.com/plotly/dash/pull/2098) Accept HTTP code 400 as well as 401 for JWT expiry
Expand Down
6 changes: 6 additions & 0 deletions components/dash-core-components/src/components/Dropdown.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,11 @@ Dropdown.propTypes = {
*/
optionHeight: PropTypes.number,

/**
* height of the options dropdown.
*/
maxHeight: PropTypes.number,

/**
* Defines CSS styles which will override styles previously set.
*/
Expand Down Expand Up @@ -218,6 +223,7 @@ Dropdown.defaultProps = {
multi: false,
searchable: true,
optionHeight: 35,
maxHeight: 200,
persisted_props: ['value'],
persistence_type: 'local',
};
Expand Down
4 changes: 4 additions & 0 deletions components/dash-core-components/src/components/css/Dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.dash-dropdown .Select-menu-outer {
z-index: 1000;
}

.dash-dropdown .Select-menu, .Select-menu-outer {
max-height: none;
}
1 change: 1 addition & 0 deletions components/dash-core-components/src/fragments/Dropdown.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const RDProps = [
'placeholder',
'disabled',
'optionHeight',
'maxHeight',
'style',
'className',
];
Expand Down
16 changes: 16 additions & 0 deletions components/dash-core-components/tests/integration/dropdown/test_visibility.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,19 @@ def test_ddvi001_fixed_table(dash_duo):
dash_duo.percy_snapshot("dcc.Dropdown dropdown overlaps table fixed rows/columns")

assert dash_duo.get_logs() == []


def test_ddvi002_maxHeight(dash_duo):
app = Dash(__name__)
app.layout = Div(
[Dropdown([str(i) for i in range(100)], "1", id="dropdown", maxHeight=800)]
)

dash_duo.start_server(app)

dash_duo.find_element("#dropdown").click()
dash_duo.wait_for_element("#dropdown .Select-menu-outer")

dash_duo.percy_snapshot("dcc.Dropdown dropdown menu maxHeight 800px")

assert dash_duo.get_logs() == []