Trying to left align suggestions from the dropdown list in the DataSearch component from ReactiveSearch for autocomplete feature. They currently display in the middle of the dropdown.
Here is what it says to do
<ReactiveBase
app="query-index"
url="http://localhost:9200">
<DataSearch
componentId="SearchSensor"
dataField={["suggestions"]}
className="autocomplete"
iconPosition="right"
innerclassName={{
list: "text-item"
}}
/>
</ReactiveBase>
and then in my css
.autocomplete .text-item {
text-align: left !important;
}
However, its not working, still displaying in the middle, what am I doing wrong?