Semantic UI sandbox

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<p>It seems that #1 is what you would like while #2 shows your problem. However, you seem to have a fixed height element. Semantic UI's default dropdown has a <code>min-height</code>. #3 gives a way to change the <code>min-height</code> however, you are responsible for changing the interal elements as well to make it look nice. Semantic UI does not out of the box provide a way to change the height of the dropdown.</p>

<p>Two possible alternatives are to use the <code>scrolling</code> or <code>inline</code> dropdown variations. Both of the alternaives require you to change your markup.</p>

<div class='ui large header'>
1
</div>
<div class='header-bs'>
Re: Info Me!
<select id="sayfaArama" class="ui search dropdown">
     <option value="">Sayfalarda ara...</option>
    </select>
</div>

<div class='spacing'></div>

<div class='ui large header'>
2
</div>
<div class='header-bs fixed-height'>
Re: Info Me! 2
<select id="sayfaArama" class="ui search dropdown">
     <option value="">Sayfalarda ara...</option>
    </select>
</div>

<div class='spacing'></div>

<div class='ui large header'>
3
</div>
<div class='header-bs fixed-height'>
Re: Info Me! 3
<select id="sayfaArama" class="ui search dropdown height-change">
     <option value="">Sayfalarda ara...</option>
    </select>
</div>

<div class='ui large header'>
Inline
</div>
<div class='header-bs fixed-height'>
Re: Info Me! 3
    
    <div id="sayfaArama" class="ui inline dropdown">
      <div class="text">Sayfalarda ara...</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="header">Adjust time span</div>
        <div class="active item" data-text="today">Sayfalarda ara...</div>
        <div class="item" data-text="this week">This Week</div>
        <div class="item" data-text="this month">This Month</div>
      </div>
    </div>
</div>

<div...

CSS

body {
    padding: 1em;
}

.spacing {
  margin: 3em;
}

.header-bs {
  width: 100%;
  height: auto;
  background-color: #a20293;
}

.fixed-height {
  height: 1.5em;
}

.height-change {
  min-height: auto !important;
  height: 1em;
}

code {
  background-color: #eeeeee;
  color: red;
  padding: 0.2em;
}

JavaScript

$('.ui.dropdown')
  .dropdown()
;