Карточки материалов AngularJS с перекрытием гибкого макета

У меня есть страница с некоторыми карточками материалов AngularJS, которые нужно расположить в двух столбцах. Последняя карточка должна отображаться во всю ширину под двумя столбцами. Однако карты № 3 и № 4 (в зависимости от ширины) перекрываются с последней картой. Я потратил часы на отладку этого, но просто не могу понять, почему это происходит.

Вот мой код:

    angular.module('app', ['ngMaterial']).controller('ctrl', function() {});

<!-- Angular Material Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">

<!-- Angular Material requires Angular.js Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.9/angular-locale_de-de.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-cookies.min.js"></script>

<!-- Angular Material Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>


<div ng-app="app" ng-controller="ctrl" ng-cloak>

    <form name="couponform" novalidate>

        <div layout="column" layout-gt-sm="row">

            <div flex="auto" flex-gt-sm="60">

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #1</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #2</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #3</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #4</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

            </div>

            <div flex="auto" flex-gt-sm="40">

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card right</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

            </div>

        </div>

        <md-card>

            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Card below</span>
                </md-card-title-text>
            </md-card-title>

            <md-card-content>
                <p>This should be below everything else</p>
            </md-card-content>

            <md-card-actions layout="row" layout-align="end center">
                <md-button ng-click="submit()">Buchen</md-button>
            </md-card-actions>

        </md-card>

    </form>

</div>

Вот соответствующая часть вывода:

На самом деле, если вы запустите код здесь, он выйдет, как и ожидалось, но если это отдельный файл HTML, это не так. Очень странно.

flexbox angularjs angularjs-material

Onestone 20.12.2016 источник

comment

Никто не может ответить, возможно, это ошибка Angular Material...? - Onestone 12.01.2017

comment

У меня в Chrome ничего не происходит, какой браузер/версия? - kuhnroyal 18.01.2017

comment

Вы скопировали HTML в файл и открыли его в Chrome? Я использую v54.0.2840.100. - Onestone 18.01.2017

comment

Я сделал только что, и он все еще работает - Chrome 55. - kuhnroyal 18.01.2017

comment

Хм, почти уверен, что это происходит, когда <!doctype html> отсутствует. - kuhnroyal 18.01.2017

comment

@kuhnroyal Большое спасибо, это решение! Если вы опубликуете это как ответ, вы получите мою награду. - Onestone 18.01.2017

Ответы (2)

arrow_upward
3
arrow_downward

Вам не хватает <!DOCTYPE html>, без этого браузер отображает страницу в режиме причуд.

См. Зачем мне нужен тип документа? (Что он делает)

kuhnroyal 18.01.2017

arrow_upward
0
arrow_downward

Я создал эту кодовую ручку для фрагмента, и мне кажется, работать нормально, даже если ширина изменена на что-либо.

Вероятно, это может быть проблема с браузером, это не похоже на ошибку материала Angular.

    angular.module('app', ['ngMaterial']).controller('ctrl', function() {});

<!-- Angular Material Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">

<!-- Angular Material requires Angular.js Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.9/angular-locale_de-de.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-cookies.min.js"></script>

<!-- Angular Material Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>


<div ng-app="app" ng-controller="ctrl" ng-cloak>

    <form name="couponform" novalidate>

        <div layout="column" layout-gt-sm="row">

            <div flex="auto" flex-gt-sm="60">

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #1</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #2</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #3</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card left #4</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

            </div>

            <div flex="auto" flex-gt-sm="40">

                <md-card>

                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card right</span>
                        </md-card-title-text>
                    </md-card-title>

                    <md-card-content>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                        <p>Some content</p>
                    </md-card-content>

                </md-card>

            </div>

        </div>

        <md-card>

            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Card below</span>
                </md-card-title-text>
            </md-card-title>

            <md-card-content>
                <p>This should be below everything else</p>
            </md-card-content>

            <md-card-actions layout="row" layout-align="end center">
                <md-button ng-click="submit()">Buchen</md-button>
            </md-card-actions>

        </md-card>

    </form>

</div>

Divyanshu Maithani 18.01.2017

comment

Спасибо, но я не вижу никаких изменений в вашем Codepen, и если вы сохраните HTML в файл и откроете его в Chrome, проблема с перекрытием останется. - Onestone; 18.01.2017

Карточки материалов AngularJS с перекрытием гибкого макета

Ответы (2)

Вопросы по теме