Errores #3393
Actualizado por Admin Savia Web Admin hace 10 meses
Deberíamos optimizar la pantalla de búsqueda de algunas pantallas Deberiamos comenzar a agrandar el ancho utilizable del sistema, actualmente usan en los monitores , uan resolucion de 1920x1080 Segun GPT no hace falta ir 100% responsive para “ensanchar” y que deje de verse angosto. *Acá tenés un plan rápido y con bajo impacto (en orden de ROI):* 1) Pasar de “fijo 1080” a “fluido con límites” La idea es: usar más ancho cuando hay, pero sin reventar pantallas chicas. Definí un contenedor principal con: width: 100% max-width: 1600px (o 1440/1700 según te guste) centrado con margin: 0 auto min-width: 1200px (si querés evitar que se rompa en notebooks) *Ejemplo CSS global:* * /* contenedor principal * */ .app-shell{ width: 100%; max-width: 1600px; min-width: 1200px; margin: 0 auto; padding: 0 16px; /* margen interno */ } Y envolvés tu layout raíz con un <div sclass="app-shell"> ... </div>. Resultado: en 1920 se ensancha sin tocar 300 pantallas. En 1366 sigue entrando (si ponés min-width 1200). Si alguien tiene pantalla chica, aparece scroll horizontal (mejor eso a que se rompa). 2) Mantener “fijo” pero subir el ancho base (si querés lo más simple) Si hoy tenés algo tipo width: 1080px;, podés cambiarlo a: 1280 / 1366 / 1440 / 1600 Esto es lo menos costoso, pero no aprovecha 1920 al máximo. 3) Atacar solo los “cuellos de botella”: tablares y formularios Normalmente lo angosto viene de: *Grid/Listbox con columnas rígidas* formularios con Hlayout/Grid con widths fijos En vez de porcentajes, en ZK podés “fluidificar” con hflex/vflex (es MUCHO más rápido que calcular %): *Para formularios* En inputs/containers: hflex="1" En labels: ancho fijo chico Ejemplo: <hlayout width="100%"> <label value="Nombre" width="120px"/> <textbox hflex="1"/> </hlayout> *Para tablas* listbox hflex="1" y columnas críticas con hflex="min" o un width razonable Evitá 10 columnas con width fija grande; dejá 1–2 columnas “flexibles”. 4) Evitar que “el contenido se pegue” al crecer Cuando ensanchás, si no ajustás espaciados se ve raro. Con 2–3 reglas globales lo solucionás: .app-shell .z-window-content, .app-shell .z-groupbox-content{ padding: 12px 16px; } 5) Estrategia de migración por fases (sin reescribir todo) Fase 1 (1–2 días): contenedor fluido + max-width + padding global. Fase 2: arreglar pantallas top 20% uso (grillas y forms) con hflex="1". Fase 3: recién ahí “responsive fino” si lo necesitás. 6) Decisión rápida: ¿qué ancho elegir? *Para ERP de escritorio:* max-width: 1600px suele quedar muy bien en 1920. min-width: 1280px evita que se rompa en notebooks medianas.