Odd behavior on accordion component

Post Reply
Jorge
Posts: 12
Joined: 21 Sep 2011, 14:00

07 Aug 2017, 15:44

Hey guys,

I'm trying to create an accordion panel and define its inner tab height. I was able to define it changing the .ui-accordion-content style class. I added in my code the following style at the head section:

Code: Select all

	<h:outputStylesheet>
		.ui-accordion-content{
			height: 265px !important;
		}
	</h:outputStylesheet>
This works and the tab size starts with the given value (265px) the problem is that the behavior of the component becomes odd, not fluid as without that tweak. Without this CSS when you click in an deactivated tab it opens sliding all the way from the start to the end. With this style it start sliding a bit then open it all at once.

Here is the hole code:

Code: Select all

<h:head>
	<title>Test Prime</title>
	<h:outputStylesheet>
		.ui-accordion-content{
			height: 265px !important;
		}
	</h:outputStylesheet>
</h:head>

<body>
	<h:form>
		<p:accordionPanel>
			<p:tab title="teste1">
				egflijsdflgids<br/>
				sdgfsdfgsdf<br/>
				gsdgfsdfg<br/>
				sdgf<br/>
			</p:tab>
			<p:tab title="teste1">
				egflijsdflgids<br/>
				sdgfsdfgsdf<br/>
				gsdgfsdfg<br/>
				sdgf<br/>
			</p:tab>
			<p:tab title="teste1">
				egflijsdflgids<br/>
				sdgfsdfgsdf<br/>
				gsdgfsdfg<br/>
				sdgf<br/>
			</p:tab>
		</p:accordionPanel>
	</h:form>
</body>
I'm using the Icarus template but the same behavior does happen without it.
So, what should I do to modify the tab height without losing the smoothness of the component behavior?

Thanks in advance,
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2510
Joined: 29 Jun 2013, 12:38

10 Aug 2017, 10:13

Please try the following code;

Code: Select all

body .ui-accordion .ui-accordion-content {
    height: 265px;
}

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest