Can't remove bottom line on autocomplete component for all states.
I just want to remove the underline of the autocomplete component but it won't go away.
<div class="header">
<div class="input-container">
<ejs-autocomplete placeholder="Table Name" floatLabelType="Auto" class="autocomplete" CssClass="e-custom" ></ejs-autocomplete>
<ejs-dropdownlist #owner
id="owner"
placeholder="Owner"
[allowFiltering]="true"
[dataSource]='["ALL","t2", "t3"]'
[fields]="{ value: 'id', text: 'label' }"
[value] = '"ALL"'
cssClass = ''>
</ejs-dropdownlist>
</div>
</div>
======================================= STYLES
.header{
width: 100%;
padding-top: 4rem;
padding-bottom: 4rem;
display: flex;
flex-direction: column;
background-color: #a2bac2;
align-items: center;
.input-container{
width: 60%;
height: 3rem;
display: flex;
background-color: white;
border-radius: 10px;
ejs-autocomplete{
flex-grow: 1;
height: 100%;
border: none;
}
ejs-dropdownlist{
flex-grow: .5;
height: 100%;
border: none;
span{
height: 100% !important;
}
.e-input-group .e-control-wrapper .e-ddl .e-lib .e-keyboard .e-valid-input{
height: 100% !important;
}
.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before, .e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
display: none;
}
.e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left),
.e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
border: none !important;
}
}
}
}
.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after{
background:none;
border:none;
}
