CODEWITHSUNDEEP
cssreactjsmulti-select
Hritik Sharma
Hritik Sharma

Reputation: 2020

Issues in dropdown css

I am using this library react-multi-select-component for multiSelect dropdown. This is my code :

      const [selected,setSelected] = useState([]);
      const options = ["2022-02-01","2022-02-10"];
      <MultiSelect
          className="prefill__Dropdown"
          options={options}
          value={selected}
          onChange={setSelected}
          labelledBy="select"
          valueRenderer={customValueRender}
          overrideStrings={{
            selectSomeItems: "Prefill Past Observation",
            allItemsAreSelected: "All Items are Selected",
            selectAll: "Select All Past Observations",
            search: "Search",
            noOptions: "No Past Observations Available"
          }}
          style={{cursor:"pointer"}}
       />

where , options is an array and selected is a state of type array . setState is the method to change the state "selected".

When no options are selected the image looks like this :

When no options are selected

The issue , I am facing is : When any option is selected . The width of the options get reduced . The below image shows the issue .

When option is selected

How do I fix the width issue of the option when any of the options are selected ?

Upvotes: 0

Views: 330

Answers (3)

Nitesh Sharma
Nitesh Sharma

Reputation: 21

Material ui has very well documentation regarding overriding css through sx property check it out here

Upvotes: 0

Shahrukh Khan
Shahrukh Khan

Reputation: 33

You can check how styling can we overridden in material-ui and then fix your issue. Material-ui.

There is a clean method overriding things inside material ui rather than inspecting and then styling it.

Upvotes: 1

stefantut
stefantut

Reputation: 71

It seems to be a CSS issue, you can inspect in your browser the selected element and override the CSS under prefill__Dropdown class.

Upvotes: 1

Related Questions