0

Buenas, estoy desarrollando una aplicación de escritorio usando electron. La app simplemente, por ahora, muestra un mapa creado con openlayers 3. Al intentar que el mapa ocupe todo el alto de la ventana con la propiedad css height : 100%; parece no "hacer caso".

He comprobado que la altura del mapa varía solo cuando varía el ancho, da igual el alto que pongas, como si lo tratara de forma proporcional al ancho del mapa.

mainWindow {width : 800, height : 600}

mainWindow {width : 600, height : 600}

Mirando en el dev tools, parece que el estilo es aplicado pero no respeta el alto, ¿Porqué?

1
  • Puedes poner un fragmento con el código que te muestra el mapa?
    – devconcept
    el 5 sep. 2016 a las 15:35

3 respuestas 3

1

Si es que entiendo tu pregunta, lo que tu deseas es adaptar el mapa dependiendo de la altura y ancho de la pantalla, es decir, hacerlo responsive.

Todo esto se debe a que quizás no estes colocando un height:100% al elemento padre donde tienes tu mapa, que en este caso sería la etiqueta html y body. Te dejo un ejemplo que he puesto ya algunas veces aquí, espero que te sirva.

html, body{
  height:100%;
}

#responsive{
  background-image:url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width:100%;
  height: 100%;
  display:table;
}

.text-center{
  display: table-cell;
  vertical-align: middle;
  width:450px;
  font-size:2em;
  color:#FFFFFF;
  text-shadow:0px 2px 5px #000000;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <section id="responsive">
      <div class="text-center">
        ¡La imagen de fondo de mi pantalla se adapta al tamaño!
      </div>
    </section>
  </body>
</html>

Si te das cuenta, se adapta al tamaño de la pantalla. Espero que te sirva y cualquier duda, con gusto la leo para ayudarte! Saludos.

1
  • 1
    Estabas en lo cierto. Fallo mío, no sé como no he podido caer. Muchas gracias!! =) el 6 sep. 2016 a las 0:41
0

En realidad el problema está al momento de dimensionar las ventanas en Electron BrowserWindow: para que se dimensionen al tamaño total de la ventana basta con importar el módulo screen de electron o ejecutar con electron.screen algo como esto; el método getPrimaryDisplay devuelve muchos datos, debes elegir el que mejor se acomode a tu necesidad. Puedes consultar más en la documentación de la API.

const { app, BrowserWindow, screen } = require('electron')

    let win
    app.whenReady().then(() => {
      const { width, height } = screen.getPrimaryDisplay().workAreaSize
      win = new BrowserWindow({ width, height })
      win.loadURL('https://github.com')
    })
-2

Puedes usar 100vh en lugar de 100% y listo.

Las medidas vh hacen referencia al tamaño de la pantalla y no al tamaño del padre del elemento.

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.