Button repositioning doesn't work inside the sidebar!

[tiagoroque10]

Goodnight ! I'm trying to make my project responsive for mobile devices, however, when trying to reposition a button inside a sidebar I noticed that the css is not applied to the button. When I remove the button from the sidebar and place it in a dialog, the style that I defined previously works normally. Please help me to solve this problem. Thank you very much in advance.

Code: Select all

<p:dialog widgetVar="menuLateral" id="menuLateral" header="Mais Filtros" position="right" showEffect="fade"
                      fitViewport="true" width="79%" height="100vh" modal="true" styleClass="estilodialogmenu">
                <h:panelGroup>
                    <h:panelGroup id="panelMaisFiltrosMobile">
                        <div class="ui-g">
                            <div class="ui-g-12 ui-md-12 ui-lg-12 ui-xl-12">
                                <h:panelGrid style="width: 100%">
                                    <p:outputLabel value="Título"/>
                                    <p:inputText value="#{livroOcorrenciasBean.tituloFill}" styleClass="estiloInputText"/>
                                </h:panelGrid>
                            </div>

                            <div class="ui-g-12 ui-md-12 ui-lg-12 ui-xl-12">
                                <h:panelGrid style="width: 100%">
                                    <p:outputLabel value="Criado por"/>
                                    <p:inputText value="#{livroOcorrenciasBean.funcFill}" styleClass="estiloInputText"/>
                                </h:panelGrid>
                            </div>
                            <div class="ui-g-12 ui-md-12 ui-lg-12 ui-xl-12">
                                <h:panelGrid style="width: 100%">
                                    <p:outputLabel value="Início Data Registro"/>
                                    <p:calendar locale="pt" size="16" mask="true" timeZone="#{livroOcorrenciasBean.timezone}"
                                                pattern="dd/MM/yyyy" value="#{livroOcorrenciasBean.dtIni}" styleClass="estiloInputText"/>
                                </h:panelGrid>
                            </div>
                            <div class="ui-g-12 ui-md-12 ui-lg-12 ui-xl-12">
                                <h:panelGrid style="width: 100%">
                                    <p:outputLabel value="Fim Data Registro"/>
                                    <p:calendar locale="pt" size="16" mask="true" timeZone="#{livroOcorrenciasBean.timezone}"
                                                pattern="dd/MM/yyyy" value="#{livroOcorrenciasBean.dtFim}" styleClass="estiloInputText"/>
                                </h:panelGrid>
                            </div>
                            <div class="ui-g-12 ui-md-12 ui-lg-12 ui-xl-12">
                                <h:panelGrid style="width: 100%">
                                    <p:outputLabel value="Status"/>
                                    <p:selectOneMenu value="#{livroOcorrenciasBean.idStatusSelecionado}" styleClass="estiloInputText">
                                        <f:selectItem itemLabel="Todos..." itemValue=""/>
                                        <f:selectItems var="status" value="#{livroOcorrenciasBean.listaStatus}"
                                                       itemLabel="#{status.nome}" itemValue="#{status.id}" />
                                    </p:selectOneMenu>
                                </h:panelGrid>
                            </div>
                        </div>
                    </h:panelGroup>
                </h:panelGroup>
                <p:commandButton  icon="fa fa-search" value="Pesquisar" onclick="PF('menuLateral').hide()"
                                  process="@this,panelMaisFiltrosMobile" update="saidaTable"
                                  action="#{livroOcorrenciasBean.pesquisarBean(true)}"
                                  style="margin-left: 2px;position: absolute;bottom: 20px;
                                  width: 70%;background-color: #1c526d; border: 0px;color: #ffffff;margin-bottom: 10px"/>
            </p:dialog>

PrimeFaces Developer | PrimeFaces Extensions Developer
PrimeFaces Elite 10.0.2 / PF Extensions 10.0.2

[Melloware]

Can you make a small PrimeFaces Test reproducer so we can debug the issue? see: https://github.com/primefaces/primefaces-test

Also your signature says PF Developer in it? You might want to remove that part.