assigning css property to parent, not to child

Question

In my application, I am using bootstrap-tagsinput angular version (in smartadmin) which looks like this

code for bootstrap input tag:

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

I am using this in my dashboard inside widget as a widget toolbar in dropdown popover

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>

I have applied css properties to the popover

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

That bootstrap input tags element is not looking in this popover as I showed in the image above.

Maybe it is coming because of that css properties that is inherited by this input field also. So is there any way that those css properties will not be inherited by the input tag or element inside the form

Answer 1

Seems like you have an overwrite of css definition which is making <input> element display block instead of floated / inline.

I don't know if this is the solution but looking at the differences between the 2 cases I would suggest to close the <label> tag before the <input> element and not after input element, something like:

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

And the whole snippet:

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