jquery - magicsuggest 的 CSS 问题

Question

我正在使用 magicsuggest用于标记。我已经添加了所有必需的依赖项(即 jquery 和 bootstrap)，并且有一个非常简单的 HTML 页面，如下所示:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label for="tags" class="control-label">Tags</label>
                <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." />
                <input type="text" class="form-control" id="tags" />
            </div>
        </div>
    </div>
</div>

我的JS如下:

 $('#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
    });

我面临的问题是我根本无法让它显示建议框!在使用 firebug 进行了一些调试之后，我发现它创建了一个带有“ms-res-ctn dropdown-menu”类的 DIV 元素。 “下拉菜单”是默认的 Bootstrap 类:

<div class="ms-res-ctn dropdown-menu" style="height: 41px;"><div class="ms-res-item ms-res-item-active" data-json="{&quot;Name&quot;:&quot;Blues&quot;,&quot;Description&quot;:&quot;quoque non esset et quantare nomen non plurissimum estis Pro gravis quad et pars homo, vobis Quad pars apparens quartu et&quot;,&quot;Id&quot;:&quot;be8c735b-7c3e-9154-d1ec-dd2d67c161eb&quot;}"><em>Blue</em>s</div></div>

.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;
}

我不得不修改“下拉菜单”CSS 类并用以下属性覆盖:

margin: 6px -13px 0;
position: relative;

考虑到所有实例都完美运行，这对我来说似乎真的很狡猾。为我的基本 CSS 技能道歉，但我做错了什么？

Answer 1

我确实说过我的 CSS 技能很糟糕，这很可悲!

我发现我的 base.css 中有一条规则搞砸了 magicsuggest 的结果:

.form-group {
    overflow: hidden;
}

为什么？我不知道!