I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline.
https://i.sstatic.net/3Cua1.png
I have tried inline styling the element as:
<EuiFormRow className={FilterStyles.taskFilerContainer}>
<EuiComboBox
fullWidth={true}
placeholder="Task"
options={tasks}
selectedOptions={selectedOption}
onChange={(v) => handleChange(v)}
isClearable={true}
compressed={false}
rowHeight={60}
style={{ height: "40px" }} <----- Here
className="task"
/>
</EuiFormRow>
I have also attempted adding !important without success.
However, I have been able to override the style in the browser by manually styling the euiComboBox class:
https://i.sstatic.net/4CuJ6.png
.euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable {
padding-right: 58.125px;
height: 40px; <-- Here
}
https://i.sstatic.net/QDetU.png
Is there a way to style the element using a custom class or inline style?