cssreactjsformikreact-bootstrap-typeahead

angledown icon in react-bootstrap-typeahead

Using typeahead inside formik and having tough time to add the fa-angle-up and fa-angle-down icons for react-bootstrap-typeahead as below image

enter image description here

instead i have problem like below(it should look like above image)

enter image description here

code: https://codesandbox.io/s/formik-example-forked-8m6o6

Solution

  • Can you please check the below code link? Hope it will work for you. We have added one element custom-dropdown and put FontAwesomeIcon and Typeahead element inside this.

    In .custom-dropdown we set position: relative; and

    In .fa-angle-down we set position: absolute; and also set its position as per your requirement.

    Please refer to this link: https://codesandbox.io/s/formik-example-forked-uupel