github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 12:43:52 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Fix search box out of screen (#2650)

Browse Source 
Programatically set search results max height
This commit is contained in:
Alexander Skvortsov 2021-03-07 16:31:23 -05:00 committed by GitHub
parent acd9fa8e3e
commit eec39ec426
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
framework/core/js/src/forum/components/Search.js
View File

@ -113,6 +113,13 @@ export default class Search extends Component {
onupdate() {
// Highlight the item that is currently selected.
this.setIndex(this.getCurrentNumericIndex());
// Since extensions might add elements above the search box on mobile,
// we need to calculate and set the max height dynamically.
const resultsElementMargin = 14;
const maxHeight =
window.innerHeight - this.element.querySelector('.Search-input>.FormControl').getBoundingClientRect().bottom - resultsElementMargin;
this.element.querySelector('.Search-results').style['max-height'] = `${maxHeight}px`;
}
oncreate(vnode) {

1
framework/core/less/common/Search.less
View File

@ -15,7 +15,6 @@
}
}
.Search-results {
max-height: 70vh;
overflow: auto;
left: auto;
right: 0;