title: Summernote buttons varying height
body: <p>I have a Summernote WYSIWYG editor inside a Bootstrap modal. It uses a custom toolbar. (Although, this problem still occurs using the default toolbar).</p>
  
  <p>As you can see in the image below, some of the buttons are varying in height. It's particularly noticeable with the dropdown next to the color change button.</p>
  
  <p><img src="https://i.stack.imgur.com/N4fYr.png" alt="Varying height buttons"></p>
  
  <p>Am I missing a file or definition that forces the buttons to be the same size?</p>
  
  <p>Here are my included CSS files:</p>
  
  <pre><code>&lt;link href="../css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="../css/bootstrap-theme.min.css" rel="stylesheet"&gt;
  &lt;link href="../css/theme.css" rel="stylesheet"&gt;
  &lt;link href="../css/summernote.css" rel="stylesheet"&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>Here is the JavaScript:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;script src="../assets/js/docs.min.js"&gt;&lt;/script&gt; 
  &lt;script src="../scripts/summernote.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(e){
      $('#news_editor').summernote({height:150,toolbar:[
      ['style',['bold','italic','underline','clear']],
      ['fontface',['fontname']],
      ['textsize',['fontsize']],
      ['fontclr',['color']],
      ['alignment',['ul','ol','paragraph']],
      ['insert',['link','picture','table']],
      ['adv',['codeview']]
      ]});
  });
  ...
  </code></pre>
  
  <p>And here is the entire HTML file: <a href="http://pastebin.com/G3Heae8J" rel="nofollow noreferrer">http://pastebin.com/G3Heae8J</a></p>