css - selectitems - selectonemenu primefaces

PrimeFaces p: selectOneMenu width

Question

Quiero que el ancho de p:selectOneMenu sea ​​automático con respecto a la celda principal, no con respecto a los valores que tiene.

<p:panelGrid>
<p:row>
<p:column><p:outputLabel value="Value01" for="idInput01"/></p:column>
<p:column><p:inputText value="#{bean.input01}" id="idInput01" /></p:column>
<p:column><p:outputLabel value="Value02" for="idSelect" /></p:column>
<p:column>
<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter">
<f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="#{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>
</p:column>
</p:row>
</p:panelGrid>

Lo que tengo:

Lo que estoy esperando:

Nota: no quiero especificar un ancho fijo.

Answer 1

Puede identificar el elemento y cambiar el ancho del estilo a través de CSS. Hazlo el 100% de su contenedor.

Answer 2

La única forma que encontré es usar jQuery para inicializar el ancho en el momento de la carga.

Puede crear simplemente una clase de CSS como esta (solo para ser utilizado como selector de futur):

.full-width
{
}

Y añádelo a tu componente:

<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width">
<f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>

Como necesitará jQuery , debe agregar esto dentro de su h:head si aún no está usando los componentes de PrimeFaces que lo usan.

<h:outputScript library="primefaces" name="jquery/jquery.js" />

Aquí está el pequeño script que inicializa todo p: selectOneMenu en el selector:

<script>
$(document).ready(
function()
{
$("div.ui-selectonemenu.full-width").each(
function()
{
$(this).css("width",$(this).parent().width());
}
);
}
);
</script>

Answer 3

.ui-selectonemenu, .ui-selectonemenu-label a:

.ui-selectonemenu{
width: 100% !important;
}
.ui-selectonemenu-label{
width: 100% !important;
} 

Answer 4

Si su p:selectOneMenu está en un DIV con un ancho asignado, encuentro setting style="width:100%;" en la p:selectOneMenu parece funcionar en mi caso.

Answer 5

puede agregar el valor de ancho directamente en el componente para modificarlo, para evitar afectar a otros p: selectOneMenu existente en la página.

<p:selectOneMenu style="width: 100% !important">
...
</p:selectOneMenu>

Answer 6

Mi solución: autoWidth = "false"

Answer 7

Ahora tengo una solución adecuada para esto.

Primefaces 6.0 ahora tiene un nuevo campo llamado autoWidth que de forma predeterminada se establece en true y puede establecerse en falso.

Si lo haces como dicen algunas de las respuestas anteriores y lo configuras en falso, todo lo que estás haciendo es jugar a la ruleta con tu aplicación css. Al establecerlo en falso, Primefaces le dejará a usted administrar el ancho. Puede tener el ancho establecido en el atributo selectOneMeny expliclitly by style, o alguna clase css en su aplicación.

Pero de esto no se trata este tema, este problema se refiere al hecho de que el comportamiento predeterminado de no especificar ningún ancho en un menú desplegable hace que nuestros menús desplegables sean, en general, demasiado pequeños para las etiquetas que están ahí.

Entonces, lo que realmente queremos es que AutoWidth funcione correctamente.

Finalmente, miré el componente y el renderizador, y es obvio que el mecanismo de ancho automático no funciona en el lado del back-end. El lado del backend solo construye algunos datos JSON que el constructor de JavaScript de Primefaces puede usar para sintonizar correctamente en el navegador el comportamiento del widget.

Si le gusta el código fuente de las fuentes 6.0, el error está en META-INF / resources / primefaces / forms

Busque el código que dice lo siguiente:

Widget PrimeFaces SelectOneMenu

En esta función de javascript busca el fragmento de código que dice:

_render: function() {
if(this.cfg.autoWidth) {

En esta sección de código, tu error es la siguiente línea:

this.jq.css(''min-width'', this.input.outerWidth());

Aquí, apliqué el siguiente parche que, con suerte, debería funcionar para que el cuadro desplegable sea tan grueso como la etiqueta más grande:

 _render: function() {
if(this.cfg.autoWidth) {
// BEGIN: PATCHING
// ORIGINAL CODE:
// this.jq.css(''min-width'', this.input.outerWidth());
// BUGFIX:
// (a) compute the original min-with primefaces 6.0 would put on the root div
var primefacesBugWidth = this.input.outerWidth();
// (b) compute the length of the hidden select element with all the labels inside of it
var widthOfHiddenDivWithSelectLabels = this.jq.find(''div select'').width();
var widthOfTheDropDownTriangle = this.jq.find(''.ui-selectonemenu-trigger.ui-state-default.ui-corner-right'').width();
var widthOfLabelPlusTraingle = widthOfHiddenDivWithSelectLabels + widthOfTheDropDownTriangle;
// (c) we will use whichever length is longer
// in bug-fixed primefaces version the outerWidth should be computed correctly
// but this seems not to be the case
var maxWidthOfTwoPossibleOptions = primefacesBugWidth > widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle;
this.jq.css(''min-width'', maxWidthOfTwoPossibleOptions);
// END: PATCHING
}
}

La idea del código anterior es: (a) mirar el div oculto con todas las etiquetas y obtener el ancho de ese div (b) agregar a esa longitud el ancho necesario para el triángulo de las caras primarias hacia abajo (c) comparar el ancho que tenemos calculado de acuerdo con lo sugerido por las caras y que parece ser demasiado pequeño

NOTA: Para instalar el parche, debe copiar todo el código Primaces para SelectOneWidget. Añádelo a un archivo javascript bajo tu control. Asegúrese de ejecutar solo la compilación de su archivo javascript después de que se haya cargado el archivo JavaScript de PrimeFaces.

Normalmente, las caras principales se representan en HEAD. Entonces, si tiene jasvacript como último emento en el cuerpo, debería estar bien.

El parche está funcionando bien para mí. Sin embargo, este es el código que no me gusta mantener.