Weblog

A partir de la versión de APEX 3.1 si añadimos un texto en la casilla “Post Element” en ciertos elementos (checkboxes, popup lovs, etc.) veremos que el texto aparece debajo del elemento en lugar de aparecer a la derecha del elemento.

Esto es debido a un error en la especificación del CSS que define el fieldset. A partir de APEX 3.1 se ha cambiado la declaración de la clase del CSS. Según los de APEX esto no se cambiará de momento. Aquí va un workaround.

Voy a partir de un ejemplo en concreto (con el que me encontré el problema) vamos a añadir un icono para eliminar el valor de una Popup LOV. Para ello podemos añadir el siguiente código en el Post Element Text:

<img onclick="document.getElementById('#CURRENT_ITEM_NAME#_HIDDENVALUE').value='';
document.getElementById('#CURRENT_ITEM_NAME#').value=''" src="#IMAGE_PREFIX#delete.gif" alt="" />

Esto añadirá un icono con una X al lado del Popup-lov que nos permitirá eliminar el valor seleccionado. Si usamos APEX > 3.0 veremos como esta X aparece debajo del elemento en lugar de la derecha. Aquí esta el problema del CSS que he comentado. Para ello, debemos redeclarar la clase “lov”.

Añadimos el siguiente código en el HTML header de la página en concreto:

<style type="text/css">
.lov {
display:inline;
vertical-align:baseline;
}
</style>

Como veremos no quedará perfectamente alineado. Para ello podemos hacer una pequeña trampa y modifcar el Post Element Text y encapsular el código dentro de un SPAN con vertical-alignment:

<span style="vertical-align: middle;">
 
<img onclick="document.getElementById('#CURRENT_ITEM_NAME#_HIDDENVALUE').value='';
document.getElementById('#CURRENT_ITEM_NAME#').value=''" src="#IMAGE_PREFIX#delete.gif" alt="" />;
 
</span>

Más información en el post del foro de APEX:

http://forums.oracle.com/forums/thread.jspa?threadID=659658&start=0&tstart=0