Quote from Ivanes82 on January 2, 2022, 5:19 am

He encontrado esta web Flexy Boxes — CSS flexbox playground and code generation tool (the-echoplex.net), que me parece muy útil para poder configurar según las necesidades, pero copio el codigo css y lo pego en visualneo y no me funciona. No se si es que hago algo mal.

Quote from luishp on January 2, 2022, 12:49 pm

@ivanes82 algo importante que debemos tener presente cuando creamos webs y aplicaciones responsive es que el tamaño de la aplicación viene definido por su contenido. Es decir, no tiene una altura determinada, por lo que no podemos centrar verticalmente. El tamaño crece desde arriba hacia abajo a medida que incluimos nuevos elementos y la altura es diferente según el ancho de panatalla disponible.
En el caso de VisualNEO Web, por defecto existe un límite al ancho de la aplicación (max-width) igual al ancho que hayamos elegido al crear la aplicación. Pero está forzado y puede fácilmente eliminarse para tener una web o app "full width":

.neopage,.neobody{
  max-width:100%;
}

Utilizando las propiedades max-height, min-height, max-width y min-width puedes forzar hasta cierto punto el comportamiento "responsive" para que quede dentro de unos límites determinados.

Respecto a las clases flex que estás intentando utilizar directamente, para poder aplicarlas en VisualNEO Web es importante hacerlo sobre Containers con la propiedad position en "relative". Para que te hagas una idea, este es el CSS necesario para poder trabajar con las clases neo-row-* y neo-col-*. De otro modo VisualNEO Web no podrá representarlas en pantalla correctamente:

.neo-row,[class*="neo-row-"]{
  position:relative!important;
  min-height:30px;
  width:100%!important;
  height:auto!important;
  top:auto!important;
  left:auto!important;
  padding:10px;
}
.neo-col,[class*="neo-col-"]{
  position:relative!important;
  min-height:30px;
  height:auto!important;
  top:auto!important;
  left:auto!important;
  padding:5px;
}

Como seguramente sabes VisualNEO Web no estaba originalmente pensado para crear aplicaciones responsive y llegar a dar con la solución que permite hacerlo me llevó muchísimo tiempo. De hecho llegué a pensar que no era posible :)

Saludos!

Quote from Ivanes82 on January 2, 2022, 4:03 pm

Muchisimas gracias @luishp. Justamente era eso lo que necesitaba :), esas mismas clases que me has pasado, he cambiado el nombre de las clases y ahí aplico los cambios y funciona perfectamente, ahora me permite centrarlo verticalmente.

Esto he añadido a estilos:

.neo-p,[class*="neo-p-"]{
  position:relative!important;
  min-height:30px;
  width:100%!important;
  height:100%!important;
  top:auto!important;
  left:auto!important;
  padding:10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

He cambiado height a 100% y en el contenedor row modificado y ya me ocupa toda la aplicación y todas las columnas que añado me las centra en la aplicación.

Una duda que me surge y que si se pudiera ya sería increíble, es saber si hay alguna función de JavaScript que permita saber el alto de la pantalla donde se esta mostrando, y si hay otra función que permita cambiar esta clase a ese tamaño, así se podría modificar esa clase dinámicamente en función de donde se muestre.

Un saludo Luis, y muchísimas gracias.

Quote from luishp on January 2, 2022, 7:46 pm

Una duda que me surge y que si se pudiera ya sería increíble, es saber si hay alguna función de JavaScript que permita saber el alto de la pantalla donde se esta mostrando, y si hay otra función que permita cambiar esta clase a ese tamaño, así se podría modificar esa clase dinámicamente en función de donde se muestre.

@ivanes82 Puedes utilizar las variables especiales [NAB.ClientHeight] y [NAB.ClientWidth] o bien [NAB.WindowHeight] y [NAB.WindowWidth] y en funcion de sus valores añadir o eliminar clases CSS con AddClass y RemoveClass.

Si puedes, adjunta un ejemplo de lo que has conseguido para que podamos hacernos una mejor idea :)

Gracias a ti!

Quote from Ivanes82 on January 3, 2022, 5:06 am

No he conseguido añadir una clase con javascript, con el alto de la aplicación, pero de momento he podido añadir una clase que hace lo que necesito con el tamaño de la app fijo, faltaría poder modificar el alto de la clase en tiempo de ejecución con el tamaño de la pantalla en la que se esté ejecutando.

Toca seguir investigando y seguir aprendiendo javascript y css que no tengo ni idea. :)