sexta-feira, 9 de setembro de 2016

Layout no Google Chrome

Numa aplicação usando AngularJS e Bootstrap, tenho no topo o menu e no corpo da página os dados do item selecionado no menu que normalmente são botões de ação (Inserir, Editar, etc) e filtros e abaixo a lista com os itens do cadastro.

Usei o margin-top, para posicionar a barra de ações e filtros entre o menu e a lista de itens do cadastro de forma fixa (position: fixed). No firefox funciona ok, mas para minha surpresa no Google Chrome tenho fica atrás do menu.

Entre algumas soluções encontrei o margin-top específico para Google Chrome nesse link

Também existe a opção de algo como:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    .cssclass {
        margin-top: 170px;
    }
}

/* Chrome 28 and newer */
@supports (-webkit-appearance:none) {
    .cssclass {
        margin-top: 170px;
    }
}

Infelizmente não guardei o link desse para colocar os créditos aqui.

Mas por querer usar sempre o padrão não gostei muito das alternativas, tentei o padding-top mas no meu caso não encontrei um valor que ficasse bom para todos os navegadores.

O top, diferentemente do padding-top achei um valor que ficou bom para todos os navegadores mesmo ficando levemente diferente entre o Google Chrome e os outros navegadores.