Odd behavior on accordion component

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Jorge
Posts: 25
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

mert.sincan
Posts: 5281
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;
}

Jorge
Posts: 25
Joined: 21 Sep 2011, 14:00

29 Sep 2017, 16:02

Thank you @Aragorn.

I've solved it in another way without the need to fix the dimension for the internal panel.
I've tested your solution and it works.

Sorry for the delay.

Cheers,
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

02 Oct 2017, 08:27

No problem. thanks a lot for the update!

Regards,

Post Reply

Return to “Icarus”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest