Как решить выравнивание элементов IE при оформлении uib-гармошки? - PullRequest
0 голосов
/ 17 мая 2019

У меня проблемы с оформлением аккордеона. Результаты Chrome / IE / Firefox отличаются от IE11. Как я могу это исправить?

Я уже пробовал несколько вещей, например, удаление абсолютной позиции.

Вот мой HTML:

<uib-accordion close-others="oneAtATime ">
<div ng-repeat="menuElement in vm.menuElements" class ="parent-container" ng-init="parentIndex = $index">
    <div uib-accordion-group is-disabled="false">
        <uib-accordion-heading>
            <div class="parent">
                <i class="{{menuElement.iconClass}}"></i>
                <a>{{menuElement.menu}}</a>
                <i class="go-right {{menuElement.iconClass}}"></i> 
            </div>
        </uib-accordion-heading>
    </div>
</div>

И мой SASS:

.parent-container
    .panel
        background-color: transparent
        border: none

        .panel-heading
            background-color: transparent
            padding-left: 0px
            height: 35px

            .panel-title
                width: 100%

                .parent
                    align-items: center
                    display: flex
                    width: 100%

                    i
                        font-size: 2.2em
                    a
                        font-size: 14px

                .go-right
                    position: absolute
                    right: 0px

Результат на Chrome / FF / Edge (что правильно):

enter image description here

Результат на IE:

enter image description here

Как видите, элемент, использующий класс 'go-right', корректен при использовании Chrome / FF / Edge. Однако при использовании IE результат не совпадает.

Я пытаюсь сделать все, чтобы решить эту проблему, но по какой-то причине IE не доволен 'position: absolute' из класса go-right. Обратите внимание, что все элементы в каждом элементе div должны быть выровнены по вертикали, поэтому я использую display flex.

Заранее спасибо, ребята.

...