0

Boas pessoal,

Estou a ter algumas dificuldades quando faço styling de um uib-accordion. Os resultados no Chrome/IE/Firefox são diferentes relativamente ao IE11. Como posso resolver isto?

Aqui está o meu 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>

E o meu 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

Resultados no Chrome/Edge/Firefox (que estão corretos):

enter image description here

Resultado no IE11:

enter image description here

Como é possível visualizar, o elemento que está a usar a classe 'go-right' está correto quando utilizo o Chrome/Firefox/Edge. No entanto, quando uso o IE, o resultado não é o mesmo.

Estou a tentar tudo para resolver este problema, mas por alguma razão o IE não está contente com o 'position: absolute' da classe 'go-right'. De notar que todos os items em cada div devem estar alinhados verticalmente, é por isso que estou a usar a propriedade display flex.

Obrigado deste já.

5
  • Tentou colocar um top: 0?
    – Sam
    17/05/2019 às 16:39
  • Já sim. Neste caso, o elemento vai para o elemento mais em cima (onde está o X)
    – cortereal
    17/05/2019 às 16:51
  • Parece que falta um position: relative na classe .parent... o absolute precisa de um relative no elemento pai.
    – Sam
    17/05/2019 às 19:31
  • Não resolveu o problem com o position: relative
    – cortereal
    20/05/2019 às 9:18
  • Se puder colocar na pergunta o código renderizado (CTRL+U no navegador) eu poderia dar uma olhada.
    – Sam
    20/05/2019 às 12:32

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .