<kendo-textbox-container *ngIf="inputType === 'checkbox'">
        <label class="k-form-field"  (click)="setFilterValue(!filter.value)">
            <input class="smart-filter-field vertical filter-checkbox k-checkbox" type="checkbox"
                [checked]="filter.value === true" (click)="setFilterValue(!filter.value)" />
            <label class="k-checkbox-label">{{title}}</label>
        </label>
    </kendo-textbox-container>
    <label class="k-form-field" *ngIf="inputType !== 'checkbox'">
            <div>
                    <kendo-textbox-container [floatingLabel]="title" style="width: 100%; background-color: inherit;">
                            <div class="input-group">
                                <input kendoTextBox class="smart-filter-field vertical fill" [type]="inputType"
                                    [(ngModel)]="filter.value" />
                                <kendo-dropdownbutton class="input-group-addon" style="display: table-cell; padding: 0px; background-color: inherit;" [data]="operators" (itemClick)="filter.operator = $event.value"  [popupSettings]="{ appendTo: containerRef}">
                                            &nbsp;
                                            <span class="fa fa-caret-down"></span>
                                            &nbsp;
                                            <ng-template kendoDropDownButtonItemTemplate let-dataItem>
                                                <span [ngClass]="{ bolded: dataItem.value === filter.operator }">{{ dataItem.display }}</span>
                                                <span class="fa fa-check" *ngIf="dataItem.value === filter.operator" style="margin-left: 3px"></span>
                                            </ng-template>
                                </kendo-dropdownbutton>
                            </div>
                    </kendo-textbox-container>
            </div>
    </label>
    <!--
    <div class="row" style="padding-left: 15px" >
        <label class="k-form-field">{{title}}</label>
    </div>
    <div class="row" style="padding-left: 15px;">
            <div class="input-group">
                <input *ngIf="inputType === 'checkbox'" class="smart-filter-field horizontal filter-checkbox" type="checkbox"
                    [checked]="filter.value === true" (click)="setFilterValue($event.target.checked)" />
                <input *ngIf="inputType !== 'checkbox'" kendoTextBox class="smart-filter-field horizontal fill" [type]="inputType"
                    [(ngModel)]="filter.value" />
                <span class="input-group-btn op-btn-wrap">
                    <kendo-dropdownbutton class="input-group-btn op-dropdown" [data]="operators" (itemClick)="filter.operator = $event.value">
                        &nbsp;
                        <span class="fa fa-caret-down"></span>
                        &nbsp;
                        <ng-template kendoDropDownButtonItemTemplate let-dataItem>
                            <span [ngClass]="{ bolded: dataItem.value === filter.operator }">{{ dataItem.display }}</span>
                            <span class="fa fa-check" *ngIf="dataItem.value === filter.operator" style="margin-left: 3px"></span>
                        </ng-template>
                    </kendo-dropdownbutton>
                </span>
            </div>
    </div>
-->

./horizontal-field.component.css

::ng-deep .bolded {
    font-weight: bold !important;
}

::ng-deep .op-dropdown, ::ng-deep .op-dropdown * {
    height: 100% !important;
    vertical-align: middle;
    text-align: center;
}

@media only screen and (max-width: 992px) {
    .k-form-field {
        padding-right: 15px;
    }
}

@media only screen and (min-width: 993px) {
    .k-form-field {
        padding-right: 0px;
    }
}

::ng-deep .smart-filter-field.fill {
    width: auto;
    flex-grow: 1;
}

::ng-deep .k-textbox-container:not(.k-state-focused) label {
    color: gray;
}