Hacer que los elementos ocupen el 100% de una vista.

Buenas David,

Tengo varias vistas a las cuales las he intentado transformar al tamaño completo del navegador con:

SetViewSize "100wv" "100hv"

Para luego utilizar ToggleFullScreen con algún evento. El caso es que el fullscreen del navegador sale totalmente en negro, así que estaba intentando hacer que los elementos (uno por cada vista) ocupen la totalidad de la vista, por si ese es el problema.

Pero además de algunas propiedades específicas como ObjectFitStyle, no he encontrado algo para todos los elementos. Además de que no confirmo si la vista realmente está ocupando toda la pantalla.

¿Hay alguna forma de conseguir esto con AB? ¿O debería recurrir a Javascript? Relacionado con esta última pregunta ¿Hay algún elemento entre la view y los elementos que arrastro al diseño? (Por si quisiera hacer width=100% del padre por ejemplo)

En la configuración de la app el autoescalado está ON.

Un saludo y gracias.

Hola Julio,

Respecto de la primera cuestión, deberás darle un color de fondo a la vista que quieras poner a pantalla completa. Por ejemplo, puedes usar la pestaña Estilo del inspector de objetos, previa selección (clic) en la vista, y, establecer la propiedad "BackgroundColor" con un valor "#fff" (sin las comillas), por ejemplo. No necesitas usar la acción SetViewSize.

Respecto de la segunda cuestión, no estoy muy seguro de entenderla, pero, igual esto te sirve de algo en todo caso: las vistas de la app se sitúan dentro de un contenedor (DIV) con una clase clase "appView", y, dicho contenedor, además, se identifica con el nombre de la vista, es decir, tiene un atributo "id" que concide con el nombre de la vista.

No sé si esto te sirve de algo o no Julio. Añade alguna pregunta o detalla un poco más si lo ves necesario.

Buenas David,

gracias por los consejos, el fullscreen ya funciona correctamente habiendo quitado el SetViewSize.

Te explico un poco más en detalle: Yo tengo varias vistas con un elemento cada una, y que pasan de una a otra con intervalos. Estos elementos pueden ser de cualquier tipo (Imagen, Texto, Numérico...) y lo que deseo es que sean del mismo tamaño que la pantalla en la que se están mostrando. Para ello deberían ocupar el 100% de la vista, y esta vista a su vez debería ocupar el 100% del navegador, haciendo que el elemento en cuestión ocupe el 100% del navegador al mismo tiempo.

¿Queda más claro lo que necesito? Pienso que es simple pero no sé cómo lograrlo con AB.

Un saludo.

Hola Julio,

Pues,... francamente,... no termina de quedarme claro. Me explico. Si tú sitúas un control Input Text, por ejemplo, de modo que este ocupe toda la vista (a lo ancho), y, la app tiene la opción "auto escalar" establecida, entonces, dicho control ocupará toda la vista (a lo ancho), que, parece que es exactamente lo que quieres

De hecho, yo estoy probando ahora mismo algo así aquí (si es lo que creo que es, claro), y, parece funcionar correctamente, aunque, ojo, no en Internet Explorer 11, esto es, no en el navegador del depurador de AB. La siguiente imagen, de hecho, muestra una vista a pantalla completa con un control Input Text ocupando todo su ancho. ¿No es esto lo que necesitas?

Buenas David,

Pues no debo de estar haciéndolo bien, porque me quedan así...

Yo arrastro el elemento hasta que ocupa la "Vista", que en el panel de diseño es transparente en cualquier caso. Pero a lo alto no está ocupando todo, y a lo ancho a veces le falta un trecho.

Disculpa la pelea tan estúpida que tengo con el front-end, no es mi fuerte...

Hola Julio,

Ninguna disculpa, hombre. Pero, yo pensaba que hablábamos de controles Inputs, botones, etc. Ciertamente, las imágenes son un poco diferentes, pues, acaso queramos que ocupen el ancho de la pantalla, pero, no queremos que se deformen. ¿Has echado un vistazo al ejemplo "Images" que acompaña a App Builder?

En todo caso, recuerda que puedes user la acción SetStyle para cambiar el estilo de la imagen, o acciones como "AddClass", para añadir classes CSS en tiempo de ejecución, o bien código CSS que puedes situar dentro de la opción "Inline CSS" de la app.