Fixed text overflow

Text overflow fixed adding new css class to span containing text.

app/main/categories/categories.controller.js

@@ -67,19 +67,22 @@
 
 		//edits categorie
 		$scope.categories.edit = function (index) {
+			//selector function
 			var f = function () {
-				//select current
+				//use index passed by user input to select list item and make selected item editing
 				$scope.categories.list[index].editing = true;
 				//write index
 				$scope.categories.selected = index;
 			};
-			//if there is selected one deselect it
+
+			//if there is selected one, deselect it, cancel its changes and select new by index
 			if ($scope.categories.selected !== undefined) {
 				$scope.categories.list[$scope.categories.selected].editing = false;
 				$scope.categories.cancel().$loaded()
 				.then(f)
 				.catch(error);
 			} else {
+				//else just select new by index
 				f();
 			}
 		};
@@ -94,6 +97,7 @@
 		$scope.categories.save = function (index) {
 			//deselect item
 			$scope.categories.selected = undefined;
+			//delete editing property because database will not accept it
 			delete $scope.categories.list[index].editing;
 			//save it
 			$scope.categories.list.$save(index)

app/main/categories/categories.template.html

@@ -50,7 +50,7 @@ <h3>Categories <span class="glyphicon glyphicon-tag glyphicon-size-sm"></span></
 							<!-- repeating list items -->
 							<a class="list-group-item" ng-repeat="categorie in filtered = (categories.list | filter:{name:categories.search}) track by $index" ng-if="categories.list.length > 0">
 								<span class="{{categorie.icon}}" style="color: {{categorie.color}}" ng-if="!categorie.editing"></span> 
-								<span ng-bind="categorie.name" ng-if="!categorie.editing"></span>
+								<span ng-bind="categorie.name" ng-if="!categorie.editing" class="hide-text"></span>
 								<span class="badge" role="button" ng-click="categories.remove(categorie)" ng-if="!categorie.editing">
 									<span class="glyphicon glyphicon-remove" ></span>
 								</span>

css/block.css

@@ -6,3 +6,10 @@
 .navbar-brand {
 	padding: 5px 15px;
 }
+
+.hide-text {
+	display: inline-block;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	max-width: 60%;
+}