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