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.
My question is:
How to center the list on the default value? My plunker is not plete because my real situation is like the one found here
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/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare/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>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.
My question is:
How to center the list on the default value? My plunker is not plete because my real situation is like the one found here http://www.cliptheme./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./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare./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>update 1:
Here is the directive that handles this particular element:
https://pastebin./0diFfH6t
update 2:
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.
Share Improve this question edited Aug 15, 2017 at 1:35 Bonnard asked Aug 6, 2017 at 21:22 BonnardBonnard 3892 gold badges9 silver badges27 bronze badges 12- the dropdown.. is some angular custom directive provide from the template??? i try trproduce including the css but. when i look the code from the template it adds some ul and span.. soy maybe its a directive provider for the themplate. – Jesus Carrasco Commented Aug 7, 2017 at 0:25
- @JesusCarrasco please see the question, i added the directive. – Bonnard Commented Aug 7, 2017 at 0:47
- sorry pastebin arent working on my network. :( – Jesus Carrasco Commented Aug 7, 2017 at 0:50
- @JesusCarrasco here is the updated plunker with css and directive altogether plnkr.co/edit/9LRzK6lBIUgIKdTQCeRI?p=preview – Bonnard Commented Aug 7, 2017 at 1:01
- here it is as it appears on the site cliptheme./demo/clip-two/AngularJs-Admin/STANDARD/assets/js/… – Bonnard Commented Aug 7, 2017 at 1:03
5 Answers
Reset to default 3 +50First 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 :)
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
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;
}
The thing is that your example on cliptheme. does not scroll at all. It just stays centered because the div keeps it scroll position.
So to solve your issue you just need to calculate the right position and set it to the .cs-options div. One event which could be used is _toggleSelect.
Working example (see line 370-372):
https://plnkr.co/edit/XgoeU8igSSeu044EFBCV
This is just a hint and your final solution should be more sophisticated (like not query the elements every time the list is opened).
You can apply styling to id of select box as below
<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="https://netdna.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="script.js"></script>
</head>
<style>
#startYear{
padding:0 1% 0 10%;
}
</style>
<body>
<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>
</html>