Select์ ์ํธ ์์ฉํ ํ ํ์ค๋ฒ์ ๊ฐ์์ฑ ๋ณ๊ฒฝ์ ๋ฐฉ์งํ ์ ์์ต๋๊น?
๋ฐ๋ชจ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
http://codepen.io/anon/pen/XjBVbp?editors=0011
getPopupContainer
https://ant.design/components/select/#Select - ์ํ
https://codepen.io/anon/pen/NaMbVg?editors=0011
getPopupContainer={triggerNode => triggerNode.parentNode}
๋ฅผ ์ฌ์ฉํ์ฌ Popover ์ฝํ
์ธ ๋ด์์ ์ ํ ๋๋กญ๋ค์ด ๋ฉ๋ด๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค.
https://github.com/ant-design/ant-design/wiki/FAQ#select -dropdown-datepicker-timepicker-popover-popconfirm-will-scroll-with-page
๊ณต์ฅ! ๋๋ ์ด๊ฒ์ ๊ณต์ ์์ ์ ์ถ๊ฐํ ๊ฒ์ ๋๋ค. ๊ฐ์ฌ ํด์.
์๋
ํ์ธ์
์์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํด ๋ณด์์ต๋๋ค. getPopupContainer={(triggerNode: any) => triggerNode.parentNode}
๊ฒฐ๊ณผ
<Select
getPopupContainer={(triggerNode: any) => triggerNode.parentNode}
mode="multiple"
notFoundContent={selectLoading ? <Spin size="small" /> : ``}
filterOption={false}
onSearch={this.totalFocusHandler.bind(this,
siteCode )}
style={{ width: '100%' }}
>
{siteCodeList.map((item: any, index: any) => <Option key={
${item.sitecode}${index} } value={item.sitecode} >{item.sitecode}</Option>)}
</Select>
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
getPopupContainer
https://ant.design/components/select/#Select - ์ํhttps://codepen.io/anon/pen/NaMbVg?editors=0011
getPopupContainer={triggerNode => triggerNode.parentNode}
๋ฅผ ์ฌ์ฉํ์ฌ Popover ์ฝํ ์ธ ๋ด์์ ์ ํ ๋๋กญ๋ค์ด ๋ฉ๋ด๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค.https://github.com/ant-design/ant-design/wiki/FAQ#select -dropdown-datepicker-timepicker-popover-popconfirm-will-scroll-with-page
3487