ant-design: Select props dropdownStyle set left/top failure
Environment
antd 2.11.2
Reproduction link
[https://codepen.io/paranoidjk/pen/LWpaKe(我暂时无法提供 Link to minimal reproduction选项的Url,因此挂载上了默认提供的一个Url))
Steps to reproduce
<Select
mode='multiple'
notFoundContent={NOT_FOUNT_TEXT}
dropdownMatchSelectWidth={false}
onFocus={this.handleFocus.bind(this)}
onSelect={this.handleSelect.bind(this)}
onDeselect={this.handleDeslect.bind(this)}
onSearch={this.handleSearch.bind(this)}
getPopupContainer={() => document.getElementById('drop-down-area')}
***dropdownStyle={{ left: inputLeft, display: showDropDown ? '' : 'none' }}***
dropdownClassName='my-drop-down'
>
{
renderTags.map((d, i) => (<Option key={d.value}>{d.value}</Option>))
}
</Select>
What is expected?
I want to use dropdownStyle to control dropdown menu’s left/top i.e. its position params
What is actually happening?
The left/top params will be coverd by components params。 传入的style参数并不生效
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 22 (11 by maintainers)
For anyone who is looking for the document, too: dependency chain:
Select.dropdownAlign
=>rc-select.dropdownAlign
=>rc-trigger.popupAlign
=>dom-align.alignConfig
rc-select rc-trigger dom-align
Dropdown and Select are all based on
rc-trigger
, In Select, it’s calleddropdownAlign
.https://codesandbox.io/s/ov56m6zk25
我试了dropdownAlign这个属性,但是还是不能解决我的问题。因为dropdownAlign={{offset: [x, y]}}中的x y 是相对于你计算出来的top left偏移的,由于你计算出来的top,left值是变化的 导致我无法确定偏移量x,y 要设为多少。 我的理解是 当我设置了dropdownStyle 后,当 dropdownStyle中有top,left属性的时候,你就不需要计算top,left值了,直接使用我dropdownStyle中设置的top,left值。现在是你用计算出来的top,left值 把我dropdownStyle中的top, left覆盖掉了。这显然是不合理的吧。
left
is a special value in the dropdown, you can usegetPopupContainer
to render the dropdown to another container, then give that container a position you want.