p: selectOne Wyświetlanie listy menu

Mam pewien problem z p: selectOneMenu. Moje selectOneMenu zapełni listę grupowaniem. Jeśli lista jest zbyt długa, lista wyświetlana jest w górę bez pionowego paska przewijania. Powinien być wyświetlany w dół za pomocą pionowego paska przewijania.p: selectOne Wyświetlanie listy menu

Jeśli selectOneMenu jest wypełnione zwykłą listą bez grupowania, działa poprawnie. Lista może być wyświetlana za pomocą pionowego paska przewijania, jeśli jest zbyt długa.

<p:selectOneMenu id="abcd_combo_box_ctpy2" styleClass="selectOneMenu"> 
    <f:selectItems value="#{pc_Abcd.carList2}" ></f:selectItems> 
</p:selectOneMenu>

public List getCarList2() { 

    List cars; 

    SelectItemGroup g1 = new SelectItemGroup("German Cars"); 
    g1.setSelectItems(new SelectItem[] { 
      new SelectItem("BMW", "BMW"), 
      new SelectItem("Mercedes", "Mercedes"), 
      new SelectItem("Volkswagen", "Volkswagen"), 
      new SelectItem("Item 1", "Item 1"), 
      new SelectItem("Item 2", "Item 2"), 
      new SelectItem("Item 3", "Item 3"), 
      new SelectItem("Item 4", "Item 4"), 
      new SelectItem("Item 5", "Item 5"), 
      new SelectItem("Item 6", "Item 6"), 
      new SelectItem("Item 7", "Item 7"), 
      new SelectItem("Item 8", "Item 8"), 
      new SelectItem("Item 9", "Item 9"), 
      new SelectItem("Item 10", "Item 10"), 

    }); 

    SelectItemGroup g2 = new SelectItemGroup("American Cars"); 
    g2.setSelectItems(new SelectItem[] { 
      new SelectItem("Chrysler", "Chrysler"), 
      new SelectItem("GM", "GM"), 
      new SelectItem("Ford", "Ford"), 
      new SelectItem("Item 21", "Item 21"), 
      new SelectItem("Item 22", "Item 22"), 
      new SelectItem("Item 23", "Item 23"), 
      new SelectItem("Item 24", "Item 24"), 
      new SelectItem("Item 25", "Item 25"), 
      new SelectItem("Item 26", "Item 26"), 
      new SelectItem("Item 27", "Item 27"), 
      new SelectItem("Item 28", "Item 28"), 
    }); 

    cars = new ArrayList(); 
    cars.add(g1); 
    cars.add(g2); 

    return cars; 
}

Źródło

2013-08-24 bittersour

Wygląda PF numerze: -S –

ojej. Czy istnieje jakieś obejście? Próbowałem google znaleźć obejście, ale nie udało się uzyskać nic. – bittersour

Przeglądałem [drugorzędną wersję PF] (http://www.primefaces.org/elite/) drobne poprawki wydania, wygląda na to, że jeszcze tego nie naprawiły. –

Dostosuj wysokość klasy "UI-selectonemenu-sztuk-otoki".

Spróbuj

<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:p="http://primefaces.org/ui" 
     xmlns:f="http://java.sun.com/jsf/core" 
     > 
    <h:head> 
    <style> 

.ui-selectonemenu-list, 
.ui-selectonemenu-panel, 
.ui-widget-content 
{ 
    height:50% !important 
    } 


.ui-selectonemenu-items-wrapper 
{ 
    height:100% !important 
    } 


</style> 
    </h:head> 

    <h:body> 
<p:selectOneMenu id="abcd_combo_box_ctpy2" styleClass="selectOneMenu" > 
    <f:selectItems value="#{pc_Abcd.carList2}" ></f:selectItems> 
</p:selectOneMenu> 
    </h:body> 
</html>

enter image description here

Źródło

2014-03-04 12:10:24

Chciałbym wysokość ma być automatyczna. Próbowałem. To nie działa zbyt dobrze. Powód: Nie chcę określać stałej wysokości, ponieważ czasami pozycje wewnątrz selectOneMenu mogą być tylko 3 z nich, a jeśli ustawię na 200px, to nie będzie dobrze. – bittersour

Zmodyfikowałem kod. Spróbuj ponownie. W przypadku tych stylów, lista dostosowuje wysokość 50% przestrzeni. –

Co to oznacza ...? – Andrew

udało mi się dostać to pracy przy użyciu tego kodu (trochę modofocation z góry):

<style type="text/css"> 
    .ui-selectonemenu-list, 
    .ui-selectonemenu-panel 
    { 
     max-height:50% !important; 
     overflow: scroll; 
    } 
    .ui-selectonemenu-items-wrapper 
    { 
     height:100% !important; 
     overflow: scroll; 
    } 
</style>

Nadzieja to pomaga rozwiązać problem.

Źródło

2015-02-26 23:01:34

Można użyć styleClass="selectOneMenuGrouped" w selectOneMenu i podążając css:

.selectOneMenuGrouped.ui-selectonemenu-list, .ui-selectonemenu-panel 
{ 
     max-height:50% !important; 
     overflow: scroll; 
} 


.selectOneMenuGrouped .ui-selectonemenu-items-wrapper 
{ 
     height:100% !important; 
     overflow: scroll; 
}

Źródło

2016-03-02 18:03:48 user6009380

Poniższa zapewnia, że jeśli używasz filtra (wraz z grupy), a następnie pasek wyszukiwania pozostaje na górze i tylko elementy przewijaj.

.ui-selectonemenu-list, 
    .ui-selectonemenu-panel 
    { 
     max-height:50% !important; 
     overflow: auto; 
    } 
    .ui-selectonemenu-items-wrapper 
    { 

     overflow: auto !important; 
    } 
    .ui-selectonemenu-list { 
     height:300px !important; 
     overflow: scroll; 
    }

Html

 <p:selectOneMenu value="#{permissionController.selectedEntity}" 
          filter="true" filterMatchMode="contains" 
          styleClass="selectOneMenu" 
          > 
       <f:selectItem itemLabel="Select" itemValue="" /> 
       <f:selectItems value="#{permissionController.entities}"/> 
      </p:selectOneMenu>

Źródło

2016-04-02 08:37:12

p: selectOne Wyświetlanie listy menu

Odpowiedz

Powiązane problemy