Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

'contains' appears in dash table filter after filtering action

Hi,
i built a table using Dash Data table, i made some modifications using css file locally. now when i use filter option, the word contains appears after filtering action. please give any possible suggestions

import sys
from urllib.parse import parse_qs
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as table
import pandas as pd
from dash.dependencies import Output, Input
from urllib.parse import quote
from datetime import datetime, timedelta

# import files
import sqlQuries
import validateUser
import filterPage
from application import app

sys.path.append('/home/ec2-user/projects/dashboard/')
data = pd.DataFrame(columns=['Created Date', 'Source of Incoming', 'Ward Name', 'Vehicle No', 'Incoming Waste',
                             'Type of waste', 'Unit Rate', 'Bill No./Receipt no', 'Total Amount(Rs)',
                             'Mode of payment'])

layout = dcc.Loading(id='inwardLoading', type='circle', children=[
    html.Div([
        dcc.Location(id='urlInward', refresh=False),
        html.Div(id='user1', style={'display': 'none'}),
        html.Div([
            html.Div(
                "All the orders created from Web Portal & Mobile App are displayed here ",
                style={'text-align': 'left'}, className='desc-text col-10'),
            html.Div([
                html.A(
                    [
                        html.Img(src='../assets/download.png')
                    ],
                    id='downloadChosen',
                    download="inwardData.csv",
                    href="",
                    target="_blank",
                    className="btn btn-outline-secondary downloadBtn float-right"
                )
            ], className='col-2')
        ], className='row'),
        html.Div([
            table.DataTable(id='incomingTable',
                            columns=[{'name': i, 'id': i} for i in data.columns],
                            page_current=0, page_size=20, page_action='custom', filter_action='custom',
                            sort_action='custom', sort_mode='multi', sort_by=[], filter_query='',  ),
            html.Div(id="paginationStr")
        ])
    ], className='container-fluid')
])


def getuserId(value):
    print(value)
    if value is None:
        raise dash.exceptions.PreventUpdate("given a valid userId as parameter")
    userToken = parse_qs(value).get('?token')[0]
    user = validateUser.getUserIdFromToken(userToken)
    print(user)
    return user


@app.callback(
    [
        Output('incomingTable', 'data'),
        Output('downloadChosen', 'href')
    ],
    [
        Input('incomingTable', 'page_current'),
        Input('incomingTable', 'page_size'),
        Input('incomingTable', 'sort_by'),
        Input('incomingTable', 'filter_query'),
        Input('urlInward', 'search')
    ])
def loadDate(page_current, page_size, sort_by, filter, value):
    user = getuserId(value)
    dff = sqlQuries.getIncomingWasteData(user)
    if dff.empty:
        dff['Created Date'] = "No Data"
        return dff.to_dict('records'), "data:text/csv;charset=utf-8," + quote("")
    dff['Created Date'] = [str(datetime.strftime(i, '%d-%m-%Y')) for i in dff['Created Date']]
    dff['Total Amount(Rs)'] = [int(i) for i in dff['Total Amount(Rs)']]
    if filter is not None:
        dff = filterPage.getFilteredTable(dff, filter)
    if len(sort_by):
        dff = dff.sort_values(
            sort_by[0]['column_id'],
            ascending=sort_by[0]['direction'] == 'asc',
            inplace=False)
    load = dff.iloc[page_current * page_size:(page_current + 1) * page_size]
    csvString = dff.to_csv(index=False, encoding='utf-8')
    csvString = "data:text/csv;charset=utf-8," + quote(csvString)
    return load.to_dict('records'), csvString

css file as follows

/*Report Layout Styling*/

/*.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter {*/
/*    border: 1px solid black;*/
/*    border-radius: 10px;*/
/*    padding: 10px;*/
/*    !*border-top-left-radius: 5px;*!*/
/*    !*border-bottom-left-radius: 5px;*!*/
/*}*/

@font-face {
    font-family: 'font-light';
    src: url('./fonts/soleil-light.ttf');
}

@font-face {
    font-family: 'font-regular';
    src: url('./fonts/soleil-regular.ttf');
}

@font-face {
    font-family: 'font-medium';
    src: url('./fonts/soleil-semibold.ttf');
}

@font-face {
    font-family: 'font-bold';
    src: url('./fonts/soleil-bold.ttf');
}

@font-face {
    font-family: 'font-book';
    src: url('./fonts/soleil-book.ttf');
}

.grey-bg {
    background-color: #5b7583;
    color: #fff;
    font-family: font-regular;
    font-size: 12px;
}

/*Styling table*/
.grey-bg th:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.grey-bg th:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

table td, th{
    font-family: 'font-regular';
    font-size: 12px;
    color: #5B7583;
    border: 0!important;
    text-align: left!important;
    height: 45px!important;
    vertical-align: middle!important;
    padding: 10px!important;
}
tbody td.dash-cell{
    background-color: #ffffff!important;
    text-align: left!important;
    padding: 10px!important;

}
tbody tr:nth-child(even) td.dash-cell {
    background-color: #f9f9f9!important;
}



tbody tr td:last-child, th:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
tbody tr td:first-child, th:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

tbody th.dash-filter{
    /*background-color: #f9f9f9!important;*/
    border: 0 !important;
    border-radius: 0!important;
}
tbody th.dash-filter input{
    position: relative!important;
    /*background-color: #fff!important;*/
    height: 30px!important;
    text-align: left!important;
    padding: 0 5px!important;
    border-radius: 6px;
}

tbody th.dash-filter input::placeholder{
    color: #ffffff!important;
}
tbody th.dash-filter input::-ms-value{
    color: #ffffff!important;
}


tbody th.dash-header{
    background-color: #5b7583!important;
    color: #fff;
    text-align: left!important;
    height: 34px!important;
    padding: 0 0 0 10px!important;
}

tbody th.dash-header{
    --accent: #fff!important;
}

tbody th.dash-header>div{
    float: left;
}
tbody th.dash-header>div span.column-header--sort{
     float: right!important;
}

tbody th.dash-header>div span.column-header-name{
    float: right!important;
    margin-right: 5px!important;
}

span.column-header--sort{
    padding-right: 5px;
}

span.column-header--sort:hover, span.column-header--sort:focus{
    color: inherit!important;
}

/*styling previous and next button */
.previous-next-container{
	padding: 0 0;
	border: 1px solid #c7d2d8;
	margin: 15px 0!important;
	border-radius: 5px!important;
    display: flex!important;
    height: 30px!important;
    align-items: center!important;

}
.previous-next-container .first-page{
    display: none!important;
}
.previous-next-container .last-page{
    display: none!important;
}
.previous-next-container button.next-page{
    border-left: 1px solid #5b7583!important;
    opacity: 0.5!important;
    padding: 0 5px 0 5px!important;
    background-color: transparent!important;
}
.previous-next-container button.previous-page{
    border-right: 1px solid #5b7583!important;
    opacity: 0.5!important;
    padding: 0 5px 0 5px!important;
    background-color: transparent!important;
}
.previous-next-container input.current-page{
    height: 24px!important;
    width: 24px!important;
    margin: 0.2em!important;
    color: #fff!important;
    background-color: #5b7583!important;
    border-radius: 5px!important;
    border-bottom: none!important;
    pointer-events: none;
}
.previous-next-container input.current-page::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #ffffff!important;
    }
.previous-next-container input.current-page::-moz-placeholder { /* Firefox 19+ */
      color: #ffffff!important;
    }
.previous-next-container input.current-page:-ms-input-placeholder { /* IE 10+ */
      color: #ffffff!important;
    }
.previous-next-container input.current-page:-moz-placeholder { /* Firefox 18- */
      color: #ffffff!important;
    }