Calculate position correctly when minWidth is set
parent
237cbcb7b9
commit
8e09ec62a3
10
Picker.js
10
Picker.js
|
@ -4,7 +4,7 @@
|
|||
// ...Or maybe a button with a popup menu
|
||||
// License: LGPLv3.0+
|
||||
// (c) Vitaliy Filippov 2019+
|
||||
// Version 2021-09-18
|
||||
// Version 2021-10-07
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
@ -245,15 +245,15 @@ export default class Picker extends React.Component
|
|||
const max_height = (direction == 'down' ? screen_height-top-(input_pos.height||0)-32 : top-32);
|
||||
const height = Math.ceil(popup_size.height < max_height ? popup_size.height : max_height);
|
||||
top = direction == 'down' ? (top + (input_pos.height||0)) : (top - height);
|
||||
let width = (input_pos.width||0) > popup_size.width ? input_pos.width : popup_size.width;
|
||||
width = Math.ceil(props && props.minWidth && width < props.minWidth ? props.minWidth : width);
|
||||
let left = (input_pos.left
|
||||
+ (props.usePortal ? (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0)
|
||||
- (document.documentElement.clientLeft || document.body.clientLeft || 0));
|
||||
if (left + popup_size.width > screen_width)
|
||||
if (left + width > screen_width)
|
||||
{
|
||||
left = screen_width - popup_size.width;
|
||||
left = screen_width - width;
|
||||
}
|
||||
let width = (input_pos.width||0) > popup_size.width ? input_pos.width : popup_size.width;
|
||||
width = Math.ceil(props && props.minWidth && width < props.minWidth ? props.minWidth : width);
|
||||
return { top, left, width, height };
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// Simple Dropdown/Autocomplete with single/multiple selection and easy customisation via CSS modules
|
||||
// Version 2021-09-14
|
||||
// Version 2021-09-18
|
||||
// License: LGPLv3.0+
|
||||
// (c) Vitaliy Filippov 2019+
|
||||
|
||||
|
@ -34,6 +34,8 @@ export default class Selectbox extends React.PureComponent
|
|||
valueKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
// item "disabled" key - default none
|
||||
disabledKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
// item CSS class key - default none
|
||||
classKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
// automatically filter autocomplete options based on user input if `true`
|
||||
suggestionMatch: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['disabled'])]),
|
||||
// additional message to display below autocomplete options (arbitrary HTML, for example "...")
|
||||
|
@ -287,6 +289,7 @@ export default class Selectbox extends React.PureComponent
|
|||
items={this.filtered_items}
|
||||
labelKey={this.props.labelKey||'name'}
|
||||
disabledKey={this.props.disabledKey}
|
||||
classKey={this.props.classKey}
|
||||
afterItems={this.props.suggestionMsg}
|
||||
onSelectItem={this.onSelectItem}
|
||||
usePortal={this.props.usePortal}
|
||||
|
|
Loading…
Reference in New Issue