Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Select2 css is not implementing


Hello ,
I am using select2 dropdown search in react , but its css i think is not implementing as i am adding ;form-select' class with select but despite of it select2 dropdown layout is very common and unprofessional in metronic template react .As i want to apply dropdown search like it is in html .
here is the sample of code i used in react

<div className="d-flex flex-column mb-7 fv-row">
<label className="fs-6 fw-semibold mb-2">
<span className="required">Department</span>
<i
className="fas fa-exclamation-circle ms-1 fs-7"
data-bs-toggle="tooltip"
title="Department"
></i>
</label>
<select
className="form-select form-select-solid fw-bold"
{...formik.getFieldProps("departmentId")}
name="departmentId"
data-kt-select2="true"
data-control="select2"
id="departments"
data-placeholder="Select a Department..."
data-dropdown-parent="#kt_modal_add_user"
>
<option></option>
{MUMdepartmentsList?.map((department) => (
<>
<option value={department.id}>{department.departmentNameEn}</option>
</>
))}
</select>
{formik.touched.departmentId && formik.errors.departmentId && (
<div className="fv-plugins-message-container">
<div className="fv-help-block">{formik.errors.departmentId}</div>
</div>
)}
</div>

Anybody can help me? Thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi Zahid,

For a solution, you can refer to my reply in this post.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(