CODEWITHSUNDEEP
javascripthtmlcssinternet-explorerangular-material
Andrzej Gis
Andrzej Gis

Reputation: 14306

Styles form Angular Material not working on IE 11

I created a website in Angular.js with Angular Material

This is what my page looks like on Chrome, FF, MS Edge (the right look) enter image description here

And this is what it looks like on IE 11 enter image description here

This is the html (without styles, because they are too large for the question)

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
</head>

<body layout="column" layout-fill="" data-gr-c-s-loaded="true" class="layout-fill layout-column">
    <!--[if lt IE 10]>
 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
    <!-- uiView: -->
    <md-content flex="" ui-view="" layout-fill="" class="layout-fill ng-scope flex">
        <div layout="" class="application ng-scope layout-align-center-stretch layout-row" layout-align="center none">
            <form name="application" layout="column" flex-xs="90" flex-gt-xs="60" flex-gt-md="40" class="ng-pristine layout-column flex-xs-90 flex-gt-xs-60 flex-gt-md-40 ng-valid-email ng-invalid ng-invalid-required">
                <md-content layout="column" class="layout-column">
                    <h3>Whatever</h3>
                    <md-radio-group flex="50" ng-model="vm.testGoal" ng-change="vm.setDefaultTestGoal()" class="ng-pristine ng-untouched ng-valid flex-50 ng-empty" role="radiogroup" tabindex="0" aria-invalid="false">
                        <md-radio-button value="1" id="radio_2" role="radio" aria-checked="false" aria-label="Testy wstępne (50% konsumenci JMP, 25% konsumeci marek własnych innych sieci, 25% konsumeci produktów brandowych)">
                            <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                <div class="md-off"></div>
                                <div class="md-on"></div>
                            </div>
                            <div ng-transclude="" class="md-label">
                                <p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </md-radio-button>
                        <md-radio-button value="2" id="radio_3" role="radio" aria-checked="false" aria-label="Reformulacja (100% konsumenci JMP)">
                            <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                <div class="md-off"></div>
                                <div class="md-on"></div>
                            </div>
                            <div ng-transclude="" class="md-label">
                                <p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </md-radio-button>
                        <md-radio-button value="3" id="radio_4" role="radio" aria-checked="false" aria-label="Testy benchmarkingowe (1/3 konsumenci JMP, 1/3 konsumeci marek własnych innych sieci, 1/3 konsumeci produktów brandowych)">
                            <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                <div class="md-off"></div>
                                <div class="md-on"></div>
                            </div>
                            <div ng-transclude="" class="md-label">
                                <p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </md-radio-button>
                        <div layout="row" layout-align="start center" class="layout-align-start-center layout-row">
                            <md-radio-button value="4" id="radio_5" role="radio" aria-checked="false" aria-label="Inne:">
                                <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                    <div class="md-off"></div>
                                    <div class="md-on"></div>
                                </div>
                                <div ng-transclude="" class="md-label">
                                    <p class="ng-scope">Other:&nbsp;</p>
                                </div>
                            </md-radio-button>
                            <md-input-container style="width: 100%; height: auto;" class="">
                                <textarea ng-model="vm.otherTestGoal" ng-change="vm.changeTestGoal()" class="ng-pristine ng-untouched ng-valid md-input ng-empty" id="input_6" rows="1" aria-invalid="false" style="height: 30px;"></textarea>
                                <div class="md-errors-spacer"></div>
                            </md-input-container>
                        </div>
                    </md-radio-group>
                </md-content>
            </form>
        </div>
    </md-content>
</body>
<div></div>

</html>

And here is a full jsfiddle with all styles:

https://jsfiddle.net/4e32xdxx/

How can I fix the looks of the app on IE?

Upvotes: 1

Views: 1237

Answers (1)

Maciej Kasprzak
Maciej Kasprzak

Reputation: 949

Just remove overflow-auto from md-content. Jsfiddle: https://jsfiddle.net/4e32xdxx/1/

Upvotes: 1

Related Questions