Espaciado y alineación vertical: ajustar con precisión la ubicación del texto en los campos de entrada y las áreas de texto

¿Qué se puede hacer en 4D 21 R5?

La siguiente animación muestra lo que se puede conseguir combinando la alineación vertical y el relleno en un objeto de entrada.

Alineación vertical

La propiedad «Alineación vertical» ya está disponible en la lista de propiedades del Editor de formularios para los objetos «Área de texto» e «Entrada», con cuatro valores: predeterminado, arriba, en el centro y abajo. Si se deja en el valor predeterminado, la visualización no cambia con respecto a antes de esta función, por lo que no habrá cambios en los formularios existentes a menos que se active explícitamente.

También puede establecer la alineación mediante programación con el comando existente `OBJECT SET VERTICAL ALIGNMENT `, cuyo comportamiento efectivo se ha ampliado ahora a estos dos objetos:

// Alineación vertical
OBJECT SET VERTICAL ALIGNMENT(*; "txtInput"; Align center)
$align:=OBJECT GET VERTICAL ALIGNMENT(*; "txtInput")

Relleno

Hay cuatro nuevas propiedades de relleno disponibles en la Lista de propiedades del Editor de formularios para los objetos «Área de texto » y «Entrada »: Relleno izquierdo, Relleno derecho, Relleno superior y Relleno inferior

Además de estas propiedades, hay dos nuevos comandos que permiten controlar con precisión el espaciado interno: « OBJECT SET PADDING» y «OBJECT GET PADDING ». Ambos aceptan (o devuelven) un objeto conlos atributos«top»,«bottom»,«left» y«right», expresados en píxeles:

// Margen basado en objetos
OBJECT SET PADDING(*; "txtInput"; {top: 8; right: 12; bottom: 10 left: 5})
$resolvedPadding:=OBJECT GET PADDING(*; "txtInput")
// Solo puedes especificar los atributos de relleno que necesites; los atributos omitidos se establecen por defecto en 0

$resolvedPadding:=OBJECT GET PADDING(*; "txtInput")

⚠️Nota: Estos comandos también funcionan con objetos «List Box »: solo se tienen en cuenta «top» y «left», y cada uno se aplica de forma simétrica («top» tanto a la parte superior como a la inferior, y «left» tanto a la izquierda como a la derecha).

Un comportamiento coherente en todos los puntos de entrada

Independientemente de cómo se configure la alineación y el relleno (Editor de formularios, propiedad JSON/objeto del formulario, CSS o comandos 4D), el resultado final es el mismo. Se admiten los nombres de propiedades CSS estándar junto con las claves específicas de 4D:

#txtInput {
vertical-align: middle;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}

La alineación y el relleno también se mantienen correctos a medida que los objetos cambian de tamaño: en el Editor de formularios, al cambiar el tamaño de un objeto se recalcula automáticamente su alineación; en tiempo de ejecución, los objetos que se amplían mantienen el relleno constante y recalculan la alineación a medida que cambian de tamaño.

Conclusión

Con estos nuevos controles, dispones de más libertad para que cada formulario tenga el aspecto perfecto. Ahora puedes:

• Elegir la alineación vertical superior, central, inferior o predeterminada para los objetos «Texto estático » y «Entrada de texto ».
• Añadir un relleno independiente en la parte superior, inferior, izquierda y derecha.
• Utilizar el Editor de formularios, el JSON del formulario, CSS o los comandos de 4D, según la forma en que prefieras crear tus formularios.

Y tus formularios existentes también están en buenas manos: cuando no utilicen estas propiedades, seguirán mostrándose exactamente igual que antes.

Para profundizar aún más en este tema, consulta la documentación de 4D o visita el foro de 4D si tienes alguna pregunta.