mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-23 17:51:24 +02:00
Code Issues 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
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() { onupdate() {
// Highlight the item that is currently selected. // Highlight the item that is currently selected.
this.setIndex(this.getCurrentNumericIndex()); 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) { oncreate(vnode) {

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

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