0

estoy intentando colocar un mapa con mapbox en Ionic y el problema es que tengo estilos css que colocan el mapa al 100% de la pantalla. Pero el mapa me aparece solo como un recuadro, pero cuando habilito o deshabilito las herramientas de desarrollador este si toma el 100% de la pantalla

Este es mi tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab 2
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="mapa"></div>
</ion-content>

Y mi tab2.page.sccs

ion-content ion-toolbar {
  --background: translucent;
}
#mapa{
  width: 100%;
  height: 100%;
}

Aqui en modo responsive introducir la descripción de la imagen aquí

Aqui en modo web introducir la descripción de la imagen aquí

Aqui cuando habilito las herramientas de desarrollador introducir la descripción de la imagen aquí

3
  • selecciona el ion-content luego el div y agrega las clases que te aparecen
    – DavElsanto
    Commented el 13 feb. 2020 a las 15:47
  • puedes agregarle una clase a cada componente y de igual forma se tendria que modificar :)
    – ASASCED
    Commented el 13 feb. 2020 a las 17:04
  • Es mas un id te convendria incluso mas ya que en cuando a la jerarquia de los elementos en html un id tiene mas peso que cualquier otro elemento dentro de css
    – ASASCED
    Commented el 13 feb. 2020 a las 17:05

2 respuestas 2

5

Para que tu mapa ocupe toda la pantalla deberías hacer lo siguiente en el html:

<div class="mapa"></div>

Y en el css prueba a cambiar esto

.mapa{
width: 100%;
height: 100%;
}

Si esto no te funciona prueba a crear un archivo de css como estilos.css y a linkearlo con la pagina de html con:

 <link rel="stylesheet" type="text/css" href="css/estilos.css">

Después metes la regla de css que he puesto antes y te tendría que funcionar.

1

Lo primero que debes hacer es añadir el siguiente CSS a el estilo de tu elemento HTML

sytle="width: 100%; height: 100%;" 

Ten en cuenta que esta en porcentaje y por lo tanto ocupara toda la pagina, para mas información en medidas con CSS mira esta web

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.