Bootstrap styling of <select> not cross browser ok

[bppn]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior: Styling of a element (not nb-select), the select item is only styled correctly in chrome, not safari and firefox (latest versions). When comparing with plain bootstrap, the original implementation does work correctly, not the one that is themed in nebular.

Expected behavior: The select should look the same, cross browser.

Steps to reproduce: To observe the behavior of the nebular styling of the bootstrap select: http://akveo.com/ngx-admin/pages/bootstrap/inputs, notice that the selects looks weird and different on safari and firefox.

To see the behavior of the original bootstrap select, cross browser: https://getbootstrap.com/docs/4.0/examples/checkout/

The default bootstrap implementation looks the same, cross browser.

Other information:

Angular, Nebular Nebular 3.5.0 Angular 7.2.14 Bootstrap 4.0.0 Or the latest version of ngx-admin online

nnixaa commented 5 years ago

Hey @bppn, thanks for reporting. We are planning on depreciating Nebular Bootstrap starting from version 4.0.0, since Nebular now fully replaces the most important components and features, moreover providing more native Angular features. So I wanted to check with you, what is your use case of using bootstrap select component instead of native Nebular one?

bppn commented 5 years ago

Hey @nnixaa, we are indeed using the bootstrap components over the nebular components. We are very satisfied with the speed the general nebular framework (layout, ...) has given us to make an administrative application (we think this is the strength of the nebular library), however, the form controls that nebular provides are too restricted for us.

For instance, the behavior and styling of the nb-select component is not so suited for our application. The nb-select is too heavily styled for us and makes the container 1px larger on drop down (see ngx-admin, same behavior).

Moreover, we are missing quite a lot components, like apple-like switches and type-ahead drop downs, input groups (input + button or input + extra info label). If we mix-match components of other libraries, it is hard to make them look and behave the same.

That is the reason we picked the bootstrap components over the nebular components for making forms, since it gives us best of both worlds.

Unfortunately, the current implementation that nebular contains of bootstrap, introduces a lot of problems with consistent sizing and styling (form-control-lg e.g. is broken, ...).

And dropping in e.g. latest version of bootstrap, breaks a lot of things in nebular.

So we are a bit in unpleasant waters now.

nnixaa commented 5 years ago

@bppn we won't be removing Nebular Bootstrap, we just deprecating it. That means we suggest moving to the available components in Nebular (we believe starting with version 4.0 the quality of the components is increased), and then will be replacing those supported by Nebular bootstrap with native Angular implementations and better Nebular Theming support.

bppn commented 5 years ago

@nnixaa Thanks :-) . Looking forward for the next release!

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[nnixaa]

Hey @bppn, thanks for reporting. We are planning on depreciating Nebular Bootstrap starting from version 4.0.0, since Nebular now fully replaces the most important components and features, moreover providing more native Angular features. So I wanted to check with you, what is your use case of using bootstrap select component instead of native Nebular one?

[bppn]

Hey @nnixaa, we are indeed using the bootstrap components over the nebular components. We are very satisfied with the speed the general nebular framework (layout, ...) has given us to make an administrative application (we think this is the strength of the nebular library), however, the form controls that nebular provides are too restricted for us.

For instance, the behavior and styling of the nb-select component is not so suited for our application. The nb-select is too heavily styled for us and makes the container 1px larger on drop down (see ngx-admin, same behavior).

Moreover, we are missing quite a lot components, like apple-like switches and type-ahead drop downs, input groups (input + button or input + extra info label). If we mix-match components of other libraries, it is hard to make them look and behave the same.

That is the reason we picked the bootstrap components over the nebular components for making forms, since it gives us best of both worlds.

Unfortunately, the current implementation that nebular contains of bootstrap, introduces a lot of problems with consistent sizing and styling (form-control-lg e.g. is broken, ...).

And dropping in e.g. latest version of bootstrap, breaks a lot of things in nebular.

So we are a bit in unpleasant waters now.

[nnixaa]

@bppn we won't be removing Nebular Bootstrap, we just deprecating it. That means we suggest moving to the available components in Nebular (we believe starting with version 4.0 the quality of the components is increased), and then will be replacing those supported by Nebular bootstrap with native Angular implementations and better Nebular Theming support.

[bppn]

@nnixaa Thanks :-) . Looking forward for the next release!