присваивание свойства css родителю, а не ребенку - PullRequest
Новая
       32

присваивание свойства css родителю, а не ребенку

0 голосов
/ 26 июня 2018

В моем приложении я использую угловую версию bootstrap-tagsinput (в smartadmin), которая выглядит следующим образом

Bootstrap Tags Input

код для тега ввода начальной загрузки: 

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

Этот элемент входных тегов начальной загрузки не выглядит в этом всплывающем окне, как я показал на изображении выше.

enter image description here

Возможно, это происходит из-за тех свойств css, которые наследуются и этим полем ввода. Таким образом, есть ли способ, что эти css свойства не будут наследоваться тегом input или элементом внутри form

1 Ответ

0 голосов
/ 26 июня 2018

Похоже, у вас есть переопределение определения css, которое делает блок отображения элемента <input> вместо плавающего / встроенного.

Я не знаю, является ли это решением, но, глядя на различия между двумя случаями, я бы предложил закрыть тег <label> перед элементом <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>
...