mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-11-03 20:36:07 +01:00 
			
		
		
		
	Fix dropdown content overflow (#31610)
close #31602  --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
		@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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 */
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user