allow-clear with theme=bootstrap broken in 0.9.6

[zavidovych]

http://plnkr.co/edit/yzoAL0PRkOyGHeuMbGj2?p=preview

[artkoenig]

It does not relate to allow-clear, the bootstrap-layout is broken completely:

http://plnkr.co/edit/2mQ6S7w01mjKhWUMEf6b?p=preview

It was ok in 0.9.2

[jack-kerouac]

👍

[gerardp]

👍

[BP18]

👍

The Demo Plunker linked to from the README.md should be updated to use the latest version of select.css and select.js. Then this issue is immediately obvious there.

1. Temp workaround for text alignment (probably a better way to fix this):

.ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    text-align: left;
}

2. Temp workaround for missing bootstrap styles (box-shadow, etc.):
   Add css class form-control to button tag on line 2 of match.tpl.html

[abobwhite]

@BP18 Thanks. I just tried adding your two workaround adjustments for version 0.9.6 and it didn't appear to make any difference in the styling.

[abobwhite]

It appears that if the allowClear directive is included, there is a conditional ui-select-allow-clear CSS class added that does nothing (no usage in select.js or select.css)...

This is very frustrating.

[BP18]

Hi @abobwhite, I'm not using allow-clear, but my workarounds seem to work on the demo page.

Here's the Demo Plunker as-is other than upgrading to 0.9.6 so I can reproduce the problem:
http://plnkr.co/edit/TEt1lqLYSwHo30EQdLvr?p=preview

Here's the same Plunker but with my two fixes added:
http://plnkr.co/edit/M1A5BhAK7et987Bhgih3?p=preview

The padding is still messed up, but at least the text-align and other styles are better. Don't think this is really a proper fix, but hopefully it helps figure out what's going on.

[abobwhite]

@BP18 Thanks.

I'm confused - isn't this issue surrounding the allow-clear styling? allow-clear on both plunkr's yield the same styling issue. If you weren't talking about allow-clear, what styling were you trying to fix, exactly?

[BP18]

@abobwhite, in my first demo Plunker link with just the upgrade to 0.9.6, the Bootstrap theme control is messed up. Without focus on the control, the text is center aligned and the field does not have the other Bootstrap form-control css styles like box-shadow and transition: border-color ease-in-out.

[artkoenig]

The template did change from

to

could this be the cause?

[BP18]

@artkoenig, yes I think that is where it broke. Commit 6e94894.

Previously the button tag had the form-control css class applied, but with the new template it doesn't. This caused the shadow, transition, and other styles to be lost. The text-align and padding were being controlled by overrides in the select.css file, but that broke with this template change too.

[BP18]

Slightly tweaked my original fixes and submitted a pull request.

[gzsombor]

I tried to test your changeset, but the 'allow-clear' button is still broken. Is it supposed to be fixed by your changeset ?