CODEWITHSUNDEEP
htmlcssjsfprimefaces
Momergil
Momergil

Reputation: 2281

How to remove PrimeFaces dataList's border inside a Primeface's column?

In my webapp I declare a Primeface's dataList inside a Primeface's column which in turn is located inside a PF dataTable like this:

<p:dataTable id="equip_table" 
    value="#{virtualBean.listEquip}" 
    var="item" 
    paginator="true" 
    rows="100"
    rowsPerPageTemplate="100,50,10,5" >

    ...

    <p:column 
        headerText="Operador | Equipamentos reais" 
        style="padding: 5px; >
        <p:dataList 
            style="border: none;"
            value="#{item.equipReals}" 
            var="equips" >
            <h:outputText value="#{equips.operator}" />
            <h:outputText value=" | " />
            <h:outputText value="#{equips.equip.nome}" />
        </p:dataList >
    </p:column>

The visual result is as in the image below: the dataList is correctly put inside the column, but with an undesired border around. Not only that, it creates a distortion of (around) 1 pixel in the table's grid:

Incorrect table

I'ld like both this undesired errors removed: no border around the data displayed and no distortion in the table. I imagined this could be done by changing the style as above, style="border: none;", but that didn't work just as putting outline to none, changing the border/outline color to white, etc.. The commands are leading to no effect. I tried to do similar coding inside the column's style call, but that affect the entire column's behaviour which is undesired. Surfing on SO I found some possible solutions involving more complex .css programming which I wasn't able to adapt to my situation. Without such solution, I wasn't even able to handle the table cells misalignment.

So how do I remove this content's border? And what can be done about the table misalignment?

Upvotes: 1

Views: 2254

Answers (1)

ronchi82
ronchi82

Reputation: 138

Try putting styleClass="noBorders" on the p:dataList . And the on your CSS file or page style tag:

.noBorders *{
border: none !important;
}

If the distortion persist you might as well try to remove padding and margin from datalist.

Upvotes: 3

Related Questions