diff options
| author | charles <30816317+charles7668@users.noreply.github.com> | 2024-10-13 10:43:43 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-10-13 02:43:43 +0000 |
| commit | 6fced335817a23f5a37a601c7f1ebf111821fa32 (patch) | |
| tree | 5f85182eb8f9576cc72947910489f2f2aa22f4be | |
| parent | afa8dd45af29f529f3695b4d2bab7ed98ac830db (diff) | |
| download | gitea-6fced335817a23f5a37a601c7f1ebf111821fa32.tar.gz gitea-6fced335817a23f5a37a601c7f1ebf111821fa32.zip | |
Fix dropdown content overflow (#31610)
close #31602
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
| -rw-r--r-- | templates/devtest/fomantic-dropdown.tmpl | 40 | ||||
| -rw-r--r-- | web_src/css/base.css | 4 |
2 files changed, 35 insertions, 9 deletions
diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl index 57a7c1313e..0b9d227220 100644 --- a/templates/devtest/fomantic-dropdown.tmpl +++ b/templates/devtest/fomantic-dropdown.tmpl @@ -29,15 +29,16 @@ <div class="default text">empty multiple dropdown</div> <div class="menu"> <div class="item">item</div> - </div> - </div> - <div class="ui multiple clearable search selection dropdown"> - <input type="hidden" value="1"> - {{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">sm1</div> + <div class="item">sm2</div> + <div class="item">medium1</div> + <div class="item">medium2</div> + <div class="item">large item1</div> + <div class="item">large item2</div> + <div class="item">large item3</div> + <div class="item">very large item test 1</div> + <div class="item">very large item test 2</div> + <div class="item">very large item test 3</div> </div> </div> <div class="ui buttons"> @@ -50,6 +51,27 @@ </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> <div> diff --git a/web_src/css/base.css b/web_src/css/base.css index 223d9fbad6..8d9f810ef8 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1364,6 +1364,10 @@ table th[data-sortt-desc] .svg { min-width: 0; /* make ellipsis work */ } +.ui.multiple.selection.dropdown { + flex-wrap: wrap; +} + .ui.ui.dropdown.selection { min-width: 14em; /* match the default min width */ } |