Ir para o conteúdo
taviroquai

Posição incorreta no android

Mensagens Recomendadas

taviroquai

Boa noite,

Venho pedir-vos a vossa ajuda com um problema que me deparei.

Isto é para colocar um donut com o EasyPieChart. A ideia é que a legenda fique sobreposta no gráfico.

No Chrome e no Firefox no windows aparece tudo correto. No Chrome no Android não. No chrome no Android, a legenda aparece sempre abaixo do gráfico.

Alguma ideia?

Segue o código:

<div style="position: relative; text-align: center; width: 188px; height: 188px;">
    <div id="chart">
        <canvas></canvas>
    </div>
    <div id="chart-legend">
        <span>0</span>%
    </div>
</div>

O css...

#chart {
  position: absolute;
  width: 188px;
  height: 188px;
  text-align: center;
  font-size: 12px;
}


#chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#chart-legend {
  position: absolute;
  top: 80px;
  left: 70px;
  z-index: 1;
}

 

Editado por taviroquai

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Lá consegui colocar o chart e a legenda como petendia. Usei uma solução que não é suportada por IE8.

#chart {
  position: absolute;
  width: 188px;
  height: 188px;
  left: 50%;
  transform: translate(-50%, 0);
}

#chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#chart-legend {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 12px;
  z-index: 1;
}

 

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.