<select> element options appear white on white

[gregkopp]

• I'm submitting a ...
  [ X] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug?

Bug

• What is the current behavior?

When adding a element, the form element appears OK until you click the drop down error. Each of the options are white text on white backgrounds. <div class="form-group"> <label>Selects</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> What is the expected behavior? The drop down should appear styled correctly. What is the motivation / use case for changing the behavior? The drop-down element is not an option for me as it does not match the style of other form elements. Please tell us about your environment: Angular version: 2.0.0-rc.X Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[Gelio]

You need to style your select. By default the form-control class has a white text color. To fix that, add a new rule to your CSS file:

select.form-control {
  color: black;
}

This will set the color on all select with that class to black.

@nnixaa do you think this should be added as default?

[gregkopp]

That only changes the text to black, which changes the unselected text to black as well. This is not a reasonable solution.

This is different than other bootstrap templates I have seen.

[Gelio]

So you expect the select to be styled the same as other input elements, with that blueish background and white text? What about options, how do you reckon they should look like? I will try to change it as soon as I have some spare time, but please fill me in on your expectations

[gregkopp]

Yes, that's what I mean. Sorry, I am new to Angular2 and Typescript, this is very new to me. How difficult would it be to implement something like ng2-select in this template? https://github.com/valor-software/ng2-select

[Gelio]

I can't speak about ng2-select, but I guess it would be pretty easy to style the current one to match other components. I will try to provide necessary styles after I play around with it after work (possibly with a PR).

I will also try to include ng2-select into the admin panel and possibly make a PR after it's done.

[gregkopp]

Thanks. Here's an example of a template that has different SELECT styles, but the reviews of the template kept me from purchasing it: http://demo.flatlogic.com/sing-wrapbootstrap-3.1.1/angular/#/app/form/elements

[Gelio]

I've submitted a PR with updated styling. Unfortunately, nothing more than adding color to options can be done with native select tags. Let's hope this gets pulled into the repository anyways, because it will fix problems with select usage.

As to that dashboard you mentioned that uses styled select dropdowns, it uses custom tags. Their select is implemented using a button as the main component and a list of options (ul element). While it can be transferred to this project, I would consider that a theft, especially since they charge money for their dashboard, and therefore I will not pull this in.

I am going to set up ng2-select next.

[Gelio]

I have been trying to set up ng2-select, but due to the way cards are implemented the UI doesn't make any sense. See for yourself:

Firstly, ng2-select uses button.btn internally, which this dashboard's theme modifies to pop up on hover.
Moreover, card's height is set when it's initialized, therefore a scrollbar appears and the select's options are listed inside of the card, instead of overflowing out of that container. Unfortunately, there is no easy fix for this, as far as I know.
The only reasonable one is to set an artificial height on that component so that options are visible, but this will cause unnatural whitespace in your forms.

To my mind, ng2-select doesn't integrate nicely with ng2-admin. It will probably never get included as default, at least as long as the current card system is in place, so if you want it for your special use-case, you need to implement it yourself.
If you have any further questions feel free to ask.

[gregkopp]

Thank you for your efforts.

[nick-wellinghoff-sp]

select.form-control option{
background-color: #577FBA;
}

[nnixaa]

fixed by #286

[sarojk562]

can any one tell me how to get the value of select tag drop down in components.ts page. I am new and couldn't figure it out.

I am adding the select tag as follows :

<div class="form-group row">
        <label for="typeSelect1" class="col-sm-3 control-label">User Type</label>
        <div class="col-sm-9">
          <select ng-model="userType" class="form-control" id="typeSelect1">
            <option value = "1">One</option>
            <option value = "2">Two</option>
            <option value = "3">Three</option>
          </select>
        </div>
      </div>

But couldn't get the selected value in form.controls