سلام. من از react-checkbox-tree h استفاده کردم و یه لیست خیلی طولانی ای رو داره نمایش میده. ولی میخوام این لست روی محور y ها اسکرول بگیره چون خیلی طولانیه. چطور میتونم این کار رو بکنم؟ خودم یه تگ div گذاشتم و استایل ها رو دادم ولی مثل اینکه اینجوری نمیشه..
<div styl={{maxHeight:550, overflowY:'scroll'}}>
<CheckboxTree
nodes={pageLayoutNodes}
checked={this.state.checkedPageLayout}
expanded={this.state.expandedPageLayout}
onCheck={(checked) => {
this.setState({ checkedPageLayout: checked, isLoading: true,currentPage:1 }, () => this.handleCheck())
}
}
onExpand= {expanded =>
(this.state.expandedDepartment.length>0) || (this.state.expandedStore.length>0 )|| (this.state.expandedShelfLocation.length>0)
? this.setState({ expandedPageLayout: expanded, expandedDepartment:[],expandedStore:[],expandedShelfLocation:[] }) : this.setState({ expandedPageLayout: expanded})}
showNodeIcon={false}
showNodeIcon={false}
/>
</div>
راهشو پیدا کردم . اینجا میگم شاید به درد بقیه هم بخوره. اینسپکت که گرفتم داخل المنت هاش دیدم که ol دومش رو باید استایل بدم. برای همین توی کامپوننتش یه id تعریف کردم و توی فایل csshام بهش استایل دادم و کد به صورت زیر درست شد
اینجا id رو اضافه کردم:
<CheckboxTree id="sidebarTree"
nodes={pageLayoutNodes}
checked={this.state.checkedPageLayout}
expanded={this.state.expandedPageLayout}
onCheck={(checked) => {
this.setState({ checkedPageLayout: checked, isLoading: true,currentPage:1 }, () => this.handleCheck())
}
}
onExpand= {expanded =>
(this.state.expandedDepartment.length>0) || (this.state.expandedStore.length>0 )|| (this.state.expandedShelfLocation.length>0)
? this.setState({ expandedPageLayout: expanded, expandedDepartment:[],expandedStore:[],expandedShelfLocation:[] }) : this.setState({ expandedPageLayout: expanded})}
showNodeIcon={false}
/>
و اینم استایلی که دادم :
#sidebarTree ol:nth-child(2) {
overflow-y: scroll;
max-height: 500px;
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟