Changing commandLink in a DataList

[soekris]

Hello all



I'have a dataList with swipe, tap and tapHold events and it works perfectly inside a browser. However, inside a mobile browser, tapHole event opens an overlay panel asking for: "share Link, copy link, bookmark link etcetera" because I use a commandLink to print information inside dataList

Code: Select all

<p:dataList    id="dataListSpool"  value="#{comandesBean.llistaComandes}" var="comanda"  pt:data-filter="true" pt:data-inset="true" class="ui-grid-b">
     <p:ajax event="taphold"  listener="#{comandesBean.tapHoldEvent}" update="@parent:growlPlana" />
     <p:ajax event="tap"  listener="#{comandesBean.tapEvent}" update="@parent:growlPlana" />                        

     <p:commandLink   styleClass="#{comanda.bcomandacentralpreparada ? 'rowSeleccionat' : null}">
           <h:panelGroup>
                <p>#{comanda.nomcomandacentral} #{comanda.idcomandacentral}</p> 
                <p><strong>#{comanda.estatComanda} </strong></p>
                 <h:outputText class="ui-li-aside" styleClass="ui-li-count" value="#{comanda.numCandidatsTotal}" />
            </h:panelGroup>
     </p:commandLink>      
</p:dataList>   

If I change the commandLink with a DIV I always have a horrible space between IL and my DIV doing the fact of changing the color a little ugly

Code: Select all

 <div   class="#{comanda.bcomandacentralpreparada ? 'rowSeleccionat' : null}">
      <h:panelGroup>
          <p>#{comanda.nomcomandacentral} #{comanda.idcomandacentral}</p> 
          <p><strong>#{comanda.estatComanda} </strong></p>
                <h:outputText class="ui-li-aside" styleClass="ui-li-count" value="#{comanda.numCandidatsTotal}" />
                </h:panelGroup>
</div>   

My question: Is there any easy solution to this problem?

It would be possible to solve it with jquery, changing parent <li> class of every row, but we can't user jquery inside this project.

Thanks

[mert.sincan]

For first question, Can you please try your code on Mobile Chrome or Mobile FF?

[mert.sincan]

For other issue, please try with;

Code: Select all

//CSS
.myDataList .ui-listview > .ui-li-static {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      /* maybe, you can add padding-left or padding-right */
}

//xhtml
<p:dataList ... class="ui-grid-b myDataList">

[soekris]

I will try, thanks. I have realized that inside the app the problem disappears.
Thanks for your help

[Jorja Dickinson]

Thank you very much for this valuable contribution and informative.