CODEWITHSUNDEEP
css
Asking
Asking

Reputation: 4172

Change the height of option tag from select

I have the next component:

 <Select
        mode="multiple"
        placeholder="Inserted are removed"
        value={selectedItems}
        onChange={this.handleChange}
        style={{ width: "100%" }}
      >
        {filteredOptions.map(item => (
          <Select.Option key={item} value={item}>
            {item}
          </Select.Option>
        ))}
 </Select>
In my demo: https://codesandbox.io/s/hide-already-selected-ant-design-demo-39xfe?file=/index.js:542-889, i added some styles:

.ant-select-item-option-content {
  background-color: red;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  height: 10px;
  background-color: blue;
  height: auto;
}

Why height:10px; does not work? And how to apply 10px of heigth for that selector?

Upvotes: 1

Views: 252

Answers (2)

janmbaco
janmbaco

Reputation: 350

You should remove height:auto:

.ant-select-item-option-content {
  background-color: red;
  height: 5px;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  height: 10px;
  background-color: blue;
}

Or perhaps you need something like this:

.ant-select-item-option-content {
  background-color: red;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  height: 10px;
  background-color: blue;
  height: auto;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) .ant-select-item-option-content {
  background-color: blue;
}

Upvotes: 1

Jones Joseph
Jones Joseph

Reputation: 4938

I checked your link. It seems like there is another style rule thats applying a min-height:32px; to the active element.
Either remove that or include min-height in your CSS like so:

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  min-height: 10px;
  height: 10px;
  background-color: blue;
}

Upvotes: 0

Related Questions