Fix dropdown content overflow (#31610) (#32250)
Some checks are pending
release-nightly / disk-clean (push) Waiting to run
release-nightly / nightly-binary (push) Waiting to run
release-nightly / nightly-docker-rootful (push) Waiting to run
release-nightly / nightly-docker-rootless (push) Waiting to run

Backport #31610 by charles7668

close #31602 

Co-authored-by: charles <30816317+charles7668@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot 2024-10-13 11:46:55 +08:00 committed by GitHub
parent f15d5f0c4a
commit bcfe1f91d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 9 deletions

View File

@ -29,15 +29,16 @@
<div class="default text">empty multiple dropdown</div> <div class="default text">empty multiple dropdown</div>
<div class="menu"> <div class="menu">
<div class="item">item</div> <div class="item">item</div>
</div> <div class="item">sm1</div>
</div> <div class="item">sm2</div>
<div class="ui multiple clearable search selection dropdown"> <div class="item">medium1</div>
<input type="hidden" value="1"> <div class="item">medium2</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} <div class="item">large item1</div>
{{svg "octicon-x" 14 "remove icon"}} <div class="item">large item2</div>
<div class="default text">clearable search dropdown</div> <div class="item">large item3</div>
<div class="menu"> <div class="item">very large item test 1</div>
<div class="item" data-value="1">item</div> <div class="item">very large item test 2</div>
<div class="item">very large item test 3</div>
</div> </div>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
@ -50,6 +51,27 @@
</div> </div>
</div> </div>
</div> </div>
<div>
<div class="ui multiple clearable search selection dropdown tw-max-w-[220px]">
<input type="hidden" value="1,2,3,4,5,10">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">clearable search dropdown</div>
<div class="menu">
<div class="item" data-value="1">item</div>
<div class="item" data-value="2">sm1</div>
<div class="item" data-value="3">sm2</div>
<div class="item" data-value="4">medium1</div>
<div class="item" data-value="5">medium2</div>
<div class="item" data-value="6">large item1</div>
<div class="item" data-value="7">large item2</div>
<div class="item" data-value="8">large item3</div>
<div class="item" data-value="9">very large item test 1</div>
<div class="item" data-value="10">very large item test 2</div>
<div class="item" data-value="11">very large item test 3</div>
</div>
</div>
</div>
<h2>Selection</h2> <h2>Selection</h2>
<div> <div>

View File

@ -1354,6 +1354,10 @@ table th[data-sortt-desc] .svg {
min-width: 0; /* make ellipsis work */ min-width: 0; /* make ellipsis work */
} }
.ui.multiple.selection.dropdown {
flex-wrap: wrap;
}
.ui.ui.dropdown.selection { .ui.ui.dropdown.selection {
min-width: 14em; /* match the default min width */ min-width: 14em; /* match the default min width */
} }