search

affinipay / react-bootstrap-autosuggest

A modern combo-box built for React and Bootstrap
https://affinipay.github.io/react-bootstrap-autosuggest/
ISC License
56 stars 18 forks source link

Styling when using validationState #15

Closed murphyke closed 6 years ago

murphyke commented 6 years ago

When, e.g. validationState is 'error', the textbox portion of the combo-box is mostly bordered in red, as expected. However, the right side of the textbox is not bordered in red, because it is overlaid by the dropdown disclosure button on the right side, which doesn't get any special styling.

screen shot 2018-05-29 at 2 24 58 pm

trevorr commented 6 years ago

It appears to work correctly on the demo page: https://affinipay.github.io/react-bootstrap-autosuggest/#react-bootstrap

Perhaps you're not pulling in the stylesheet? It used to be included automatically (see #1), but that seemed to cause more harm than good, so it's now (as of 0.5) left to the application to include. The demo uses Webpack's Sass Loader to import it.

murphyke commented 6 years ago

OK, I will think about wading into scary webpack land, although I have already styled it enough for my purposes.

I do think it would be good to briefly document the styling situation on the "basic usage" and full documentation pages. Apologies if it's there and I missed it.

trevorr commented 6 years ago

The documentation note about it is in the README:

Note that the CSS styles required by the component are no longer included automatically as of version 0.5. For Webpack users, the recommended approach is to configure sass-loader and then require('Autosuggest.scss') in your application. You can either specify the full path (e.g. ./node_modules/react-bootstrap-autosuggest/src/Autosuggest.scss) or include ./node_modules/react-bootstrap-autosuggest/src as a search path.

If you have any helpful elaboration to offer, I'll gladly take a pull request.