CODEWITHSUNDEEP
htmlcsssemantic-ui
Douglas Gaskell
Douglas Gaskell

Reputation: 10030

Semantic-UI Dropdown doesn't show when using sidebar

When using a sidebar, if there is a dropdown in the pusher, the dropdown will not show outside of the pusher.

Why is this, and how can I resolve it? Just setting the overflow-visible doesn't seem to work.

Example JSFiddle: https://jsfiddle.net/3djmjhn5/1/

Code:

$('.sidebar').sidebar({
	context: '.pushable'
})

$('.dropdown').dropdown();
.pushable {
  height: auto!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

<h2>Dropdown doesn't Show when using sidebar</h2>

<div class="pushable">
  <div class="ui visible sidebar menu">
  </div>
  <div class="pusher">
    <div class="ui inverted menu">
      <div class="item">stuff</div>
      <div class="ui dropdown item">
            <div class="default text">select one</div>
            <input type="hidden" value="">
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Stuff 1</div>                
                <div class="item">Stuff 2</div>
                <div class="item">Stuff 3</div>
                <div class="item">Stuff 4</div>
                <div class="item">Stuff 5</div>
                <div class="item">Stuff 6</div>
            </div>
      </div>
    </div>
  </div>
</div>

<h2>Will Show Normally</h2>
<div class="ui inverted menu">
  <div class="item">stuff</div>
  <div class="ui dropdown item">
    <div class="default text">select one</div>
    <input type="hidden" value="">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Stuff 1</div>                
      <div class="item">Stuff 2</div>
      <div class="item">Stuff 3</div>
      <div class="item">Stuff 4</div>
      <div class="item">Stuff 5</div>
      <div class="item">Stuff 6</div>
    </div>
  </div>
</div>

Upvotes: 3

Views: 1169

Answers (2)

Alexander Tyapkov
Alexander Tyapkov

Reputation: 5017

You have to override the overflow property of Semantic UI elements with !important. Have a look at the example below:

$('.sidebar').sidebar({
	context: '.pushable'
})

$('.dropdown').dropdown();
.pushable {
  height: auto!important;
}

.pusher {
overflow: visible!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

<h2>Dropdown doesn't Show when using sidebar</h2>

<div class="pushable">
  <div class="ui visible sidebar menu">
  </div>
  <div class="pusher">
    <div class="ui inverted menu">
      <div class="item">stuff</div>
      <div class="ui dropdown item">
            <div class="default text">select one</div>
            <input type="hidden" value="">
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Stuff 1</div>                
                <div class="item">Stuff 2</div>
                <div class="item">Stuff 3</div>
                <div class="item">Stuff 4</div>
                <div class="item">Stuff 5</div>
                <div class="item">Stuff 6</div>
            </div>
      </div>
    </div>
  </div>
</div>

<h2>Will Show Normally</h2>
<div class="ui inverted menu">
  <div class="item">stuff</div>
  <div class="ui dropdown item">
    <div class="default text">select one</div>
    <input type="hidden" value="">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Stuff 1</div>                
      <div class="item">Stuff 2</div>
      <div class="item">Stuff 3</div>
      <div class="item">Stuff 4</div>
      <div class="item">Stuff 5</div>
      <div class="item">Stuff 6</div>
    </div>
  </div>
</div>

Upvotes: 3

2oppin
2oppin

Reputation: 1991

That's because of overflow: hidden on classes .pusher and .pushable.

Setting overflow: visible on then will fix it.

Add id to your .pusher (i.e. my-pusher) and update css to:

.pushable {
  height: auto;
  overflow: visible;
}
#my-pusher.pusher {
  overflow: visible;
}

Check the fiddle

Upvotes: 0

Related Questions