How to remove the border in p:dataList

[theodor.richard]

Hi,

is it possible to remove the border in the p:datalist component.

Thanks,
Theo

[Daedin]

Has this been answered somewhere? I googled for it, but could not find any hint.

[Flash]

I think so. You have to override the CSS class.

For example: supose you have this code:

<p:dataList value="#{tableBean.carsSmall}" var="car" itemType="disc">
#{car.manufacturer}, #{car.year}
</p:dataList>

You would add the following:

<style type="text/css">
.datalist-noborder .ui-widget-content {
border: none;
}
</style>

<div class="datalist-noborder">
<p:dataList value="#{tableBean.carsSmall}" var="car" itemType="disc">
#{car.manufacturer}, #{car.year}
</p:dataList>
</div>

This way the new CSS class "datalist-noborder" overrides the settings of CSS class "ui-widget-content", but only within the nested context, leaving the rest untouched. I would recomment a tool like Firebug to see how the underpinnings of all this CSS stuff adds together.

Hope this helps.

[Daedin]

This works perfectly! Thanks again for your quick response

[bhiles]

That works for a solution, but I'm not sure I like that it is there by default and I need special CSS rules to remove it. It should be absent by default and be able to be added by stylesheet. Can this be addressed?

[jendruch]

yet another css style solution (quite good in my opinion;)

- css:

.dataList .ui-datalist-data{
border: none;
background: transparent;
background-image: none;
}

- xhtml:

<p:dataList value="#{dlRows}" var="dlRow" styleClass="dataList">

[etapia]

I'm using bootstrap theme and PF 3.5.2 and the above solution didn't work. After investigating with Firebug I found the following solution.

Code: Select all

.ui-widget-content .ui-datalist-content{
    border: none;
    background: transparent;
    background-image: none;
}

[david.chacon]

Use ui:repeat instead