I currently need to maintain an angular.js 1.5 application which uses angular-ui-select 0.19.8.
The problem I'm having is, that the ui-select somehow breaks when packaging the app.
When running with grunt serve
, this part:
<ui-select mandatory-field-marker
multiple ng-required="true"
ng-model="some.periods">
<ui-select-match placeholder="Select some periods...">
{{$item | period}}
</ui-select-match>
<ui-select-choices
repeat="period in formCtrl.periods">
<div ng-bind-html="period | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
When running the packaged app, it looks like this:
It's not just a style problem, the broken input field doesn't allow more than 10 elements before it becomes unclickable due to shifting into the next component.
The packaging is done with grunt and as far as I can see, those are the steps used to minify the code:
useminPrepare
concat
ngAnnotate
imagemin
autoprefixer
cssmin
usemin
htmlmin
I've found some workarounds, like downgrading ui-select and adding matching classes to <ui-select>
and <ui-select-choices>
but none of them worked.
The ui-select dependency pulled by bower seems to be minified already:
Update: This seems to be a problem with grunt and/or bower.
After reconfiguring the Apache hosting the website, I've reached the error, that the vendor.min.css
is missing.
I've found the part in the (generated by bower) index.html head where it says:
<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
however, only the bootstrap.min.css
and main.min.css
are packaged into my dist:
Still don't know the reason.
I've fixed it but not very elegantly. The problem was, that the select.css and ng-tags-input.css where not packaged into a vendor.min.css, so they where missing after deployment. I could not identify which grunt-task should build the vendor.min.css, but at least I know that whoever should do it, didnt'. So in the index.html I've changed the part
<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
to
<!-- build:css(.) styles/select.min.css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<!-- endbuild -->
<!-- build:css(.) styles/ng-tags-input.min.css -->
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
which now works. This will be a problem, if there are any more css-files from bower_components in the future, but the application I'm talking about is going to be put out of service next year, so it doesn't matter.