Misplaced glyphicons on angular-schema-form - css

Question

My angular schema form misplaces the inline glyphicons, they are shown on the upper right corner of the page instead:
pic
This app was built with yeoman, using generator-angular.
html:
<div class="login-container">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model"
ng-submit="onSubmit(myForm)"></form>
</div>
ts:
angular.module('playgroundApp')
.controller('FormCtrl', ['$scope', function($scope) {
$scope.schema = {
"type": "object",
"title": "Types",
"properties": {
"string": {
"type": "string",
"minLength": 3
},
"integer": {
"type": "integer"
},
"number": {
"type": "number"
},
"boolean": {
"type": "boolean"
}
},
"required": [
"number"
]
};
$scope.form = [
"*",
{
"type": "submit",
"title": "OK"
}
];
$scope.model = {};
$scope.onSubmit = function(form) {
// First we broadcast an event so all fields validate themselves
$scope.$broadcast('schemaFormValidate');
// Then we check if the form is valid
if (form.$valid) {
// ... do whatever you need to do with your data.
}
}
}]);
I tried to search for conflicts between directives, unfortunately I couldn't reproduce the behaviour in a plunkr.
bower.json:
{
"name": "playground",
"version": "0.0.0",
"dependencies": {
"angular": "^1.5.3",
"bootstrap": "^3.2.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"angular-ui-grid": "~3.1.1",
"angular-ui-router": "~0.2.15",
"ngstorage": "~0.3.9",
"angular-ui-layout": "~1.3.0",
"angular-bootstrap": "~0.14.3",
"moment": "~2.10.6",
"lodash": "~3.10.1",
"angular-wizard": "~0.5.5",
"ui-select": "angular-ui-select#~0.16.0",
"select2": "~3.4.5",
"angular-flash-alert": "~2.2.5",
"angular-gantt": "^1.2.13",
"angular-strap": "^2.3.7",
"angular-schema-form": "~0.8.13",
"angular-ui-tree": "~2.15.0",
"components-font-awesome": "~4.6.1",
"woodman": "~1.1.0",
"angular-ui-bootstrap": "~1.0.3",
"angular-picklist": "*",
"jquery-ui": "~1.11.4",
"angular-schema-form-bootstrap": "~0.2.0",
"angular-schema-form-datepicker": "~0.4.0",
"jquery": "~3.0.0"
},
"devDependencies": {
"angular-mocks": "^1.3.0",
"ui-select": "angular-ui-select#~0.16.0"
},
"appPath": "app",
"moduleName": "playgroundApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
},
"resolutions": {
"lodash": "~3.10.1",
"angular-mocks": "^1.3.0"
}
}
Update: Ignored this problem for 4 months. Facing it today I installed the latest versions of angular-schema-form and angular-schema-form-bootstrap and the problems were gone.

Answer 1

For anyone that still has problems with those icons, is possible to disable them adding to each field in the form definition: 'feedback': false as stated in the docs here.
Maybe not the best solution, but will help if you can live without the icons.