How to make a tabMenu scrollable on primefaces

0

I can not find info about this topic, you can add the attribute scrollable="true" to a tabView but in my case what I need is a tabMenu, I'm using primefaces link , I do not want it to look like this when my browser opens:

I would like those menu components that do not fit horizontally on the screen to be scrollable.

This is the code of my menu:

    <style>    
    ul.ui-menu-child {
     white-space: nowrap;
     width: auto !important;
    }
    </style>

    <h:form id="menuform">

                            <p:tabMenu activeIndex="#{param.i}">








                                                                                            <p:menuitem value="Gestionar Platos" icon="ui-icon-star" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/platoListDataTable.xhtml?i=0" >  
                                                                                            <f:param name="i" value="0" />
                                                                                            </p:menuitem>

                                                                                            <p:menuitem value="Gestionar Puestos De Comida" icon="ui-icon-home" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/puestocomidaListDataTable.xhtml?i=1" > 
                                                                                            <f:param name="i" value="1" /> 
                                                                                            </p:menuitem>

                                                                                            <p:menuitem value="Gestionar Puntajes" icon="ui-icon-clipboard" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/puntajeListDataTable.xhtml?i=2" >
                                                                                            <f:param name="i" value="2" />
                                                                                            </p:menuitem>  

                                                                                            <p:menuitem value="Gestionar Suscripciones" icon="ui-icon-cart" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/suscripcionListDataTable.xhtml?i=3" >
                                                                                            <f:param name="i" value="3" />
                                                                                            </p:menuitem>   

                                                                                            <p:menuitem value="Gestionar Tipos De Suscripcion" icon="ui-icon-note" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/tiposuscripcionListDataTable.xhtml?i=4" >  
                                                                                            <f:param name="i" value="4" />
                                                                                            </p:menuitem>  

                                                                                            <p:menuitem value="Gestionar Tipos De Usuario" icon="ui-icon-contact" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/tipousuarioListDataTable.xhtml?i=5" >  
                                                                                            <f:param name="i" value="5" />
                                                                                            </p:menuitem>  

                                                                                            <p:menuitem value="Gestionar Tipos De Plato" icon="ui-icon-suitcase" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/tipoplatoListDataTable.xhtml?i=6" >
                                                                                            <f:param name="i" value="6" />
                                                                                            </p:menuitem>  

                                                                                            <p:menuitem value="Gestionar Usuarios" icon="ui-icon-person" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/admin/usuarioListDataTable.xhtml?i=7" >
                                                                                            <f:param name="i" value="7" />
                                                                                            </p:menuitem>

                                                                                            <p:menuitem value="Salir" url="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/j_spring_security_logout" icon="ui-icon-close" />

                                                                                            <p:menuitem>
                                                                                            <p:clock pattern="dd.MM.yyyy HH:mm:ss" />
                                                                                            </p:menuitem>  




                        </p:tabMenu>
    </h:form>

    
asked by Daniel V 08.10.2018 в 02:51
source

0 answers