angularjs - twitter bootstrap accordion IE 9 troubles with selectbox -
i'm using angularjs twitter bootstrap. in html page i'm using accordion , in content of accordion have select box. works fine firfox, ie10, chrome ... in ie9 cuts off text in select box. shows first letter of text of preselected value. if click in select box, can see whole text.
can tell me, how fix problem? seems problem accordion, because if put selectbox outside of accordion, selectbox works in ie9.
i ran similar issue (angularjs 1.2.x) select dropdown defined single empty "please select" option, , updated values returned rest api; select initial value according data received subsequent rest call, upon page load.
i think async updating confused ie9's rendering of select box (the rendering of accordion component resulted in similar situation). in our case maintain visible text width of initial 'please select' option, cutting off longer newly selected initial item (although rerender , resolve if user interacted control).
managed resolve by, in ie9, adding space end of selected option's text, triggering re-render of it. used code similar following, extends angular's built-in select directive:
(function() { "use strict"; angular.module('ngbrowserfixes', []) .config(['$provide', decorate]); function decorate($provide) { if(window.navigator.useragent.indexof("msie 9") !== -1) { $provide.decorator('selectdirective', ['$delegate', '$timeout', selectdirectivedecorator]); } function selectdirectivedecorator($delegate, $timeout) { var directive = $delegate[0], link = directive.link; directive.compile = function newcompile() { return function newlink(scope, element, attrs, ctrl) { link.apply(this, arguments); var option; $timeout(addspace, 0, false); // adding space selected option forces ie9 // re-render @ correct width function addspace() { if(element[0].selectedindex === -1) { return; } //options weren't available prior timeout delay option = element[0].options[element[0].selectedindex]; option.text += " "; scope.$evalasync(removespace); } // tidy (optional) function removespace() { option.text = option.text.replace(/\s+$/, ''); } }; }; return $delegate; } } })();
Comments
Post a Comment