问题
I'm trying to hide the vertical overflow while allowing the horizontal overflow with a dropdown, so that subcategories can be selected. I've tried using overflow-y: scroll; and overflow-x: visible, but that still causes overflow to the side to scroll.
How can I scroll for the vertical overflow, and allow the horizontal overflow?
JSFiddle: https://jsfiddle.net/utqz406p/8/
Snippet:
$('.ui.dropdown')
.dropdown({});.ui.selection.dropdown.show .menu {
overflow: visible !important;
}<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui search selection dropdown show" id="test">
<span class="text">Search Selection</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
<div class="ui selection dropdown show" id="test2">
<span class="text">Selection Visible</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
<div class="ui selection dropdown" id="test4">
<span class="text">Selection Hidden</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
<div class="ui dropdown" id="test3">
<span class="text">Choose Category</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>回答1:
Since default semantic style and structure is not allowing you to do so, you need to add a div into menu item and add scroll to that div.
And also you can try adding
.ui.selection.dropdown .menu {
overflow: visible!important;
max-height: none;
}
which will give you the exact style of .ui .dropdown in selection dropdown. It is the best way to do with semantic selection dropdown rather than adding scroll bar if its not necessary.
Here is the FIDDLE
来源：https://stackoverflow.com/questions/34805672/scrolling-vertical-overflow-while-still-allowing-horizontal-overflow