Merge e16d16a6e0 into 4b376a0ed9

improve devtest page
Using flex-wrap: wrap in .ui.multiple.selection.dropdown
2024-07-27 17:17:08 +02:00 · 2024-07-26 18:12:51 +08:00 · 2024-07-13 21:16:59 +08:00 · 2024-07-13 20:42:32 +08:00 · 2024-07-13 15:32:21 +08:00 · 2024-07-13 15:31:55 +08:00
2 changed files with 35 additions and 9 deletions
--- 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>
--- 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 */
 }
Author	SHA1	Message	Date
charles	0333373b14	Merge `e16d16a6e0` into `4b376a0ed9`	2024-07-26 18:12:51 +08:00
wxiaoguang	e16d16a6e0	improve devtest page	2024-07-13 21:16:59 +08:00
charles7668	379e0b6a3a	Using `flex-wrap: wrap` in `.ui.multiple.selection.dropdown`	2024-07-13 20:42:32 +08:00
charles7668	123e0cd3ab	Add multi selection test case to devtest	2024-07-13 15:32:21 +08:00
charles7668	78c0559c68	Fix base css	2024-07-13 15:31:55 +08:00
charles7668	7d68f34619	using `display: inline-block` in `.ui.ui.dropdown`	2024-07-13 07:18:48 +08:00
charles7668	bda7777edb	Merge remote-tracking branch 'refs/remotes/src/main' into fix/31602	2024-07-13 07:13:35 +08:00
charles	dddac21302	Merge remote-tracking branch 'origin/fix/31602' into fix/31602	2024-07-12 09:33:59 +08:00
charles	bd53229774	Use tw-flex-wrap in the dropdown div that might overflow.	2024-07-12 09:33:05 +08:00
6543	45d7a4e774	Merge branch 'main' into fix/31602	2024-07-11 14:58:22 -07:00
charles	d4978e937a	Fix dropdown content overflow	2024-07-11 09:44:09 +08:00