Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Any way to disable the default styles completely?

See original GitHub issue

Please fill below information if issuing a bug report.

Expected behaviour

I’m not using Bootstrap. I’m not using Material Design. I’d expect to be able to completely style ng-select without having to worry about overriding default styles (some with deeply nested classes).

Actual behaviour

The plugin seems to inject a style tag on the head of the page enforcing some default styles. The docs says: If you are not happy with default styles you can **easily override them** with increased selector specificity.. This is fine if we just need to change a few minor details, but if we need something quite different, then it’s quite frustrating to have to reset/override everything.

More Info

ng-select version: latest

browser: Chrome

Issue Analytics

State:
Created 6 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

Yagneshdxtcommented, Nov 22, 2020

Hi @rafaelbiten. Default styles which are included in component itself are needed because for example dropdown panel should always be with position: absolute and so on. There are still some refactoring need to be done to move some styles to themes and make less nested classes, but in general you should not need to override much of the default styles, but only extend with your custom. Best approach would be to copy default bootstrap theme scss and adjust to your needs.

Best approach should be. Instead of adding CSS by default in Head>Style tag why can’t ng-select refer to css/scss file so that if we need customization we can go and change css/scss file. Right now it is hardcoded and appended into head as style tag that is incorrect. If you append it to Style tag this becomes inline style which has 1st priority and it becomes difficult to change as this is hardcoded in the ng-select package.

1reaction

rafaelbitencommented, Mar 21, 2018

hi @anjmao thank you for the quick reply.

Yes, that’s what I ended up doing (@ng-select/ng-select/themes/default.theme.css, converted to .scss and adjusted as needed).

While doing that, I kinda understood the reasons for the <style> added to the <head>, ie.: required styles for .ng-dropdown-panel and .ng-overlay-container.

I got there because the z-index set for .ng-dropdown-panel, .ng-overlay-container and .ng-overlay were higher than a fixed nav that we have on the project, which caused problems.

I’m not sure yet, but it may be better to have all these styles grouped together, in a single place, for discoverability purposes.