CODEWITHSUNDEEP
angularjsangular-materialinternet-explorer-11
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

Angular Material Dropdown Not Showing Correctly in IE11

Is there a way to make IE11 show the Angular Material Dropdown correctly (as all other browsers do)?

This is how it should look like: enter image description here

This is how it looks in IE11:enter image description here

This is the website: [example no longer available. AngularJS was too slow, we replaced it with a faster technology]

This is the relevant code of this navigation line (simplified):

angular.module('App', ['ngMaterial']);
<!DOCTYPE html>
<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body>
  <div class="md-block" flex-gt-xs>
    <md-input-container layout="row">
      <div flex>
        <label>Mein Start-Ort (Adresse)</label>
        <inputclass="form-control" />
      </div>
      <div flex="nogrow">
        <md-button class="md-icon-button" aria-label="Standort">
          <md-icon md-svg-icon="_img/icons/location.svg"></md-icon>
        </md-button>
      </div>
    </md-input-container>
  </div>

  <div class="md-block" layout="row">
    <div flex="nogrow">
      <md-button class="md-raised md-primary">Schweiz</md-button>
    </div>
    <md-input-container flex>
      <label>Anreise</label>
      <md-select ng-model="transport">
        <md-option value="car" selected>Mit dem Auto</md-option>
        <md-option value="transit">Mit dem ÖV</md-option>
        <md-option value="bike">Mit dem Velo</md-option>
        <md-option value="walk">Zu Fuss</md-option>
      </md-select>
    </md-input-container>
  </div>
</body>

Upvotes: 1

Views: 921

Answers (1)

adam0101
adam0101

Reputation: 31005

I don't think you need flex values on the elements on the right-hand side. Is this like what you're after?

angular.module('App', ['ngMaterial']);
<!DOCTYPE html>
<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body>
  <div layout="row">
  <div class="md-block" flex-gt-xs>
    <md-input-container layout="row" flex>
      <div flex>
        <label>Mein Start-Ort (Adresse)</label>
        <input class="form-control" />
      </div>
      <div>
        <md-button class="md-icon-button" aria-label="Standort">
          <md-icon md-svg-icon="_img/icons/location.svg"></md-icon>
        </md-button>
      </div>
    </md-input-container>
  </div>

  <div class="md-block" layout="row">
    <div>
      <md-button class="md-raised md-primary">Schweiz</md-button>
    </div>
    <md-input-container>
      <label>Anreise</label>
      <md-select ng-model="transport">
        <md-option value="car" selected>Mit dem Auto</md-option>
        <md-option value="transit">Mit dem ÖV</md-option>
        <md-option value="bike">Mit dem Velo</md-option>
        <md-option value="walk">Zu Fuss</md-option>
      </md-select>
    </md-input-container>
  </div>
  </div>
</body>

Upvotes: 1

Related Questions