none
AngularJS ng-option is displayed not good in IE browser

    Question

  • I have issue with IE when I use ng-option and textbox, please help me !

    I investigated, When I remove attribute placeholder it worked ok, but I want to use placeholder to explain for my textbox

    Follow steps to reproduce this issue:

    Open on IE browser:

    Step 1: Click on TextBox

    Step 2: Click on Dropdown list

    Expected Result:  options of select tag work well, not expand width 

    Actual Result: options expand width

    My script:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="selectedName" ng-options="item for item in names">
    </select>
    <input id="abc" name="abc" placeholder="input your text">
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
    });
    </script>

    <p>This example shows how to fill a dropdown list using the ng-options directive.</p>

    </body>
    </html>

    Tuesday, November 28, 2017 11:21 AM

All replies

  • Hi Thong Nguyen Quy,

    I have tested your code in my side, this issue is not related to the angular js, you could only use select element and textbox element to test, you could get the same problem in IE, i think this issue is result of the conflict between select element and placeholder, one work around solution, you could through set textbox background image to show placeholder content. That meaning is you could put placeholder content as image format, then set the background image of textbox!

    Best Regards,

    Eric Du

    • Proposed as answer by Kai SchätzlMVP Tuesday, December 26, 2017 11:12 AM
    Friday, December 22, 2017 5:59 AM