Etiqueta

22 enero 2018

Aplicar CSS a las líneas de un pop-menu en Omnis Studio Web

Aún existen esos "tipos raros" que dedican su tiempo libre a investigar como hacer ciertas cosas en programación con Omnis Studio, el reto que me plantee consistía en como conseguir espaciar las líneas que componen un pop-menú en Omnis Studio para la Web, la siguiente imagen describe lo que se pretende conseguir:


Haciendo un poco de investigación, se puede observar que omnis monta una tabla (etiqueta html ≤table≥) a la que asigna un nombre de clase (atributo class) compuesta del siguiente modo: [nombre-del-remoteform]_[id-del-objeto-pop-menu]_clientTable de modo que lo que hice fue incluir un identificador de clase y algunos atributos CSS en el documento "user.css" que Omnis suministra al efecto.

Ejemplo:


.RemoteForm_1001_clientTable {
border-collapse: separate;
border-spacing: 0px 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}

En el ejemplo, he añadido algo de separación  entre el primero y último elemento del grupo. Les animo a que prueben variantes del código expuesto adaptándolo a sus necesidades.

Otra variante de este CSS podría ser lo siguiente...

.RemoteForm_1001_clientTable td {
     height: 31px; 
}

...esto modificará únicamente las líneas del menú cambian su altura y por tanto también el espacio entre ellas, éste último caso es el que más me gusta y que uso habitualmente para mis menús.

NOTA: Creo que los ingenieros de Omnis se han hecho eco de éste artículo, pues en la versión 8.1.6, ya se incluyen nombres de clases CSS para poder realizar éste tipo de cambios más facilmente, para el caso que nos ocupa, sería cambiar ".RemoteForm_1001_clientTable" por ".omnis-menu-table", de éste modo funcionará para con todos los menús de nuestra aplicación.


No hay comentarios: