title: CSS issues with magicsuggest
body: <p>I am using <a href="http://nicolasbize.com/magicsuggest/index.html" rel="nofollow">magicsuggest</a> for tagging. I have added all required dependencies (i.e. jquery and bootstrap) and have a very simple HTML page as below:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="tags" class="control-label"&gt;Tags&lt;/label&gt;
                  &lt;img src="~/images/help-small.png" alt="Help" class="help" data-toggle="tooltip" data-placement="right" title="Press ENTER or TAB for a new tag." /&gt;
                  &lt;input type="text" class="form-control" id="tags" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS is below:</p>
  
  <pre><code> $('#tags').magicSuggest({
          useTabKey: true,
          minChars: 3,
          typeDelay: 300,
          placeholder: "e.g. rock or pop",
          valueField: 'Id',
          displayField: 'Name',
          data: window.apiUrl + 'tags',
          method: 'GET',
          hideTrigger: true
      });
  </code></pre>
  
  <p>The problem I am facing is that I can't get it to display the suggestions box at all! After a bit of debugging with firebug, I found out that it creates a DIV element with "ms-res-ctn dropdown-menu" classes. "dropdown-menu" is a default bootstrap class:</p>
  
  <pre><code>&lt;div class="ms-res-ctn dropdown-menu" style="height: 41px;"&gt;&lt;div class="ms-res-item ms-res-item-active" data-json="{&amp;quot;Name&amp;quot;:&amp;quot;Blues&amp;quot;,&amp;quot;Description&amp;quot;:&amp;quot;quoque non esset et quantare nomen non plurissimum estis Pro gravis quad et pars homo, vobis Quad pars apparens quartu et&amp;quot;,&amp;quot;Id&amp;quot;:&amp;quot;be8c735b-7c3e-9154-d1ec-dd2d67c161eb&amp;quot;}"&gt;&lt;em&gt;Blue&lt;/em&gt;s&lt;/div&gt;&lt;/div&gt;
  
  .dropdown-menu {
      background-clip: padding-box;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
      display: none;
      float: left;
      font-size: 14px;
      left: 0;
      list-style: outside none none;
      margin: 2px 0 0;
      min-width: 160px;
      padding: 5px 0;
      position: absolute;
      text-align: left;
      top: 100%;
      z-index: 1000;
  }
  </code></pre>
  
  <p>I had to hack the "dropdown-menu" CSS class and overwrite with the below attributes:</p>
  
  <pre><code>margin: 6px -13px 0;
  position: relative;
  </code></pre>
  
  <p>This seems really dodgy to me given that all live examples work perfectly. Apologies for my basic CSS skills but what am I doing wrong?</p>