In an AngularJS app, whenever an ng-repeat produces something like this:
<div>
<button>Alice</button>
</div>
<div>
<button>Bob</button>
</div>
<div>
<button>Jennifer</button>
</div>
I would like for all buttons to have the same width, which would be the width of whichever button is the widest, determined by the length of the caption it contains. Can this be done with pure AngularJS, and without importing jQuery just for this?
Making all your buttons same width as the one with longest caption, you don't need JavaScript nor AngularJS, just CSS.
html
<div class="container">
<button type="button">Some button</button>
<button type="button">Button here, too...</button>
<button type="button">Yet another</button>
</div>
<!-- or using ng-repeat e.g. -->
<div class="container">
<span ng-repeat="button in buttons">
<button type="button" ng-bind="button"></button>
</span>
</div>
css
.container {
position: absolute;
}
.container button {
display: block;
width: 100%;
margin: 2px;
text-align: center;
}
screenshot
Related plunker here https://plnkr.co/edit/TNnWMD
We need to use one directive that would tell us that the rendering of all the element inside the ng-repeat is completed. On that completion we will check the each button, and the maximum width we will set to all button element.
Markup
<div ng-repeat="item in items" ng-repeat-finish>
<button>{{item.name}}</button>
</div>
Directive
app.directive('ngRepeatFinish', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
var maxWidth = 0;
if (scope.$last === true) {
$timeout(function() {
var allButtons = $(element).find('button');
//check the maximum width of element
angular.forEach(allButtons, function(ele, ind) {
//below code will find maxWidth
maxWidth = ele.innerWidth > maxWidth ? ele.innerWidth : maxWidth;
});
allButtons.css('width', maxWidth)
});
}
}
});
No. Angular is not supposed to handle your style(css) or markup(html). Take a look at any responsive framework like bootstrap och skeleton. You can achieve what you want with any javascript but it will be just to apply the correct tags and css classes.
Yes it can be done with pure AngularJS and it's very simple. You can define a table and repeat each button inside each cell. Doing that way - you will get all buttons with the same size.
Just create an ng-repeat in the html and a function to define the array of names in the javascript file. That's it! JSbin example
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<meta name="description" content="[groupBy example]"/>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="MainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in names">
<td>
<input
type="Button"
value="{{name}}"
style="width:100%"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
angular.module('app',['angular.filter'])
.controller('MainController', function($scope) {
$scope.names = ["Alice", "Bob", "Jennifer"];
});
You should use CSS instead of AngularJS binding. You should do something like this:
<div style="display:inline-block;">
<div style="width: 100%">
<button style="width: 100%">Alice</button>
</div>
<div style="width: 100%">
<button style="width: 100%">Bob</button>
</div>
<div style="width: 100%">
<button style="width: 100%">Jennifer</button>
</div>
</div>
Off course you should pull out the inline CSS into some styling code and use classes.
100% will get the 100% of parent..this will never set maximum width of any button..did you understand OP question correctly