Menu
I am using select and ng-options in angularjs to show a list of years that I construct myself. I pass the current year as the default value to the select.
here is the plunker link.
How to center the list on the default value? My plunker is not complete because my real situation is like the one found here http://www.cliptheme.com/demo/clip-two/AngularJs-Admin/STANDARD/#/app/form/wizard
Go to Forms / Form Wizard / Step 3 Billings
as you can see, by choosing a year, and then clicking back again on it, the menu is centered on that selected year.
But my problem is that when I pass the default year value to it, as if I have already selected, and then I click back on the list, I should see it centered on that default value, but it isn't. Once I click again on that year, and click on the list again, I see it centered.
In other words, passing a year as default value doesn't play the same role as if I selected it for the first time by clicking, because when I re-click again, it is not centered. How can we fix this problem?
Here is the CSS file for the selecter I am using: css link, this is not included in the plunker nor in the snippet, because I couldn't properly reproduce that CSS on the plunker, if you can, please do it.
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.dates = {};
$scope.years = [{value: 'Year', disabled: true}];
var current_year = new Date().getFullYear();
for(var i = current_year - 20; i <= current_year + 20; i++){
$scope.years.push({value: i + ''});
}
var d = new Date();
var n = d.getFullYear();
$scope.dates.startYear = n;
}); <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="MyCtrl">
<label class="control-label">Year</label>
<select name="startYear" ng-model="dates.startYear" id="startYear"
ng-options="year.value as year.value disable when year.disabled for year in years"
required>
<option value="" disabled >Choose one</option>
</select>
</div>
</body>Here is the directive that handles this particular element:
https://pastebin.com/0diFfH6t
Here is the plunker that shows exactly the problem even after Dekel's solution. https://plnkr.co/edit/aWbZkp4xitvBcMmhHadI?p=preview
as you can see, on the page load, when clicked on the dropdown menu, it doesn't center on the default value.
867
First I gotta say that the
<select>tag is not a standard tag, since the rendering of that tag is partially done by the OS and not the browser, so it behaves a little different then other elements, and you can't really apply css to everything you need there.
Having said that - there are (almost) always hacks that can be done, and I'm going to show this example as one of the hacks:
function selectfocus() {
el = event.target;
sizeWhenOpen = 5;
el.size=sizeWhenOpen;
totalHeight = el.getBoundingClientRect().height;
heightPerOption = el.scrollHeight/el.options.length;
currentIndex = el.selectedIndex;
el.scrollTop = heightPerOption * (currentIndex - Math.floor(sizeWhenOpen/2));
}<select
onfocus="selectfocus()"
onblur="this.size=1;"
onchange="this.size=1; this.blur();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
</select>Since we can't control the number of elements that will be displayed when the <select> is open, i used two states - one when closed (size=0) and one when open (size=5 in the example). When the select is open - I took the current selected option (based on the index) and scrolled the select to the relevant position do make sure it's centered.
Another important note - inside your application you might need use css to position (absolute/relative) the select/it's container in order to keep the original size (the size when open is bigger than the size when closed).
And here is the angular version, based on your plunkr:
https://plnkr.co/edit/eV1sPxENpcO1xXcS6JL3?p=preview
Final note - If you need exact things from the
<select>tag in your website - use an implementation of drop-down that is based on regular html elements and not select :)
97
Why not just write some CSS to target the span tag?
span { text-align: center; }
or better yet.... tag it to an id or class
.className { text-align: center; }
#idName { text-align: center; }
Below is a functional plunker.
Plunker Example
33
With reference to your Update 2 plunk link you just need to update your CSS. Specify the width(whatever you want) of your area in which you have to place the select box. This will surely fix your problem :)
.myctrl {
position: absolute;
vertical-align: top;
margin-left: 50px;
width: 200px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
