Help with AccordionPanel and CSS

[eabusato]

Hello,

I have searched the forum but haven't found an answer to this. In the following code:

Code: Select all

<p:accordionPanel collapsible="true" style="font-size:10px; width: 640px;" >
	<p:tab title="Interval Customization">
		<p:dataTable>
			<p:column>
				<f:facet name="header">
					<h:outputText value="Start"  />
				</f:facet>
			</p:column>  
		</p:dataTable>
	</p:tab>
</p:accordionPanel>

How do i remove the space between the Accordion panel border and the table border? Or even the space between the accordion panel border and anything inside, like some text. I have tried all combinations of:

.ui-accordion .ui-accordion-content .ui-accordion-content-active {
margin:0px;
padding: 0px;
}

Thanks!!

Erick

[eabusato]

I have tried also inserting the margin:0 and padding:0 in the style="" field inside accordionPanel and the dataTable, but it did not work also.

[cagatay.civici]

I'd suggest using firebug to see which style applies where and change it live to test it.

[Panachovo]

Hi, i've used FireBug to check the result for modify style for accodionPanel. The div of inside of tab don't change, so the unique solution I can see is modify .css, isn't it?

Thanks!

[deusaquilus]

Thanks to Optimus for suggesting Firebug, it was pretty easy to narrow down the problem. The following <style> tags will remove the padding:

Code: Select all

 <style>
 .ui-accordion .ui-accordion-content {
         padding: 2px;
     }
 </style>

Unfortunately this has an effect on every single accordion on the page as well.

[kukeltje]

Then create a more specific css rule... Basic CSS like in normal html. Nothing special

[cagatay.civici]

Then create a more specific css rule... Basic CSS like in normal html. Nothing special

+1