Question

在我的应用程序中，我正在使用bootstrap-tagsinput有角度的版本（在smartadmin中），

引导程序输入标签的代码：

<div class="row">
     <div class="col-sm-12">
          <div class="form-group">
               <label>Type and enter to add an SMA</label>
               <input smartTags class="form-control tagsinput" value="{{tagsValues}}" data-role="tagsinput">
          </div>
     </div>
</div>

我正在小部件内的仪表板中将其用作下拉弹出窗口中的小部件工具栏

dashboard.component.html

<div class="widget-toolbar">
            <div class="btn-group dropdown dropdown-large" dropdown>
                <a class="button-icon" title="SMA Filter" dropdownToggle aria-expanded="true">
                    <i class="fa fa-cog"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-large filterDropwdownViewAlign" (click)="$event.stopPropagation()">
                    <div id="checkout-form" class="smart-form">
                        <header id="filterHeader">SMA</header>
                        <fieldset>
                            <form>
                                <div class="row form-group">
                                    <section class="col col-xs-12">
                                        <label class="form-control" style="border:0px;height:auto">
                                            <input id="smartTagInput" smartTags class="form-control tagsinput" value="{{smaValues}}" data-role="tagsinput">
                                        </label>
                                    </section>
                                </div>
                            </form>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>

我已将CSS属性应用于弹出框

.filterFormAlign {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding-right: 0px  !important;

}
.filterFormAlignToggle{
    padding-left: 0px  !important;
}
.filterDropwdownViewAlign {
    margin: 35px 0 0;
    top: 3px;
    padding: 0px !important;
}
@media only screen and (min-width:768px) {
    .filterDropwdownViewAlign {
        min-width: 335px !important;
        left: -296px !important;
    }
}
@media only screen and (max-width: 479px) and (min-width: 320px) {
    .filterDropwdownViewAlign {
        min-width: 310px !important;
        left: -255px !important;
    }
}

如上图所示，该引导程序输入标签元素不在此弹出框中显示。

也许即将到来是因为该输入字段也继承了css属性。因此，有什么办法可以使css内的input标签或元素不会继承那些form属性？

Answer 1

似乎您覆盖了CSS定义，使<input>元素显示为块，而不是float / inline。

我不知道这是否是解决方案，但查看这两种情况之间的区别，我建议在<label>元素之前而不是在input元素之后关闭<input>标签，例如：

<label class="form-control" style="border:0px;height:auto">
</label>
<input id="smartTagInput" smartTags class="form-control tagsinput" value="{{smaValues}}" data-role="tagsinput">

整个片段：

<div class="widget-toolbar">
            <div class="btn-group dropdown dropdown-large" dropdown>
                <a class="button-icon" title="SMA Filter" dropdownToggle aria-expanded="true">
                    <i class="fa fa-cog"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-large filterDropwdownViewAlign" (click)="$event.stopPropagation()">
                    <div id="checkout-form" class="smart-form">
                        <header id="filterHeader">SMA</header>
                        <fieldset>
                            <form>
                                <div class="row form-group">
                                    <section class="col col-xs-12">
                                        <label class="form-control" style="border:0px;height:auto">
                                        </label>
                                            <input id="smartTagInput" smartTags class="form-control tagsinput" value="{{smaValues}}" data-role="tagsinput">

                                    </section>
                                </div>
                            </form>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>

将CSS属性分配给父级，而不是子级

1 个答案: