Accordion not displaying well

erichayes
Topic Author
Offline

7 years 4 weeks ago #4858 by erichayes

Accordion not displaying well was created by erichayes

Please see erichay.es/boehle/products-visform .

Resins and Pigments are pagebreaks. I want Resins and Pigments to be collapsed by default and click to expand. Thanks.

Administrator AV
Offline

7 years 3 weeks ago #4862 by Administrator AV

Replied by Administrator AV on topic Accordion not displaying well

Hi,

obviously there is some CSS missing. I will take a look into this on Monday. At the moment I think it can be fixed easily.

Regards,
Aicha

I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-)

Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-)

Administrator AV
Offline

7 years 3 weeks ago - 7 years 3 weeks ago #4863 by Administrator AV

Replied by Administrator AV on topic Accordion not displaying well

Hi,

thanks for your patience.

I have added some CSS to the Visforms CSS.
Basically it is the default Boostrap CSS code for accordions/collapsables.
As far as I can see this fixes the problem.

I will send you the modified file, so that you can test with it.
Please let me know if this fixes the problem.

Please note, that the default behavior of bootstrap accordions is, that the first panel is expanded by default, when the page is displayed. The other panels are collapsed.

As Visforms uses the default bootstrap accordion HTML, Javascript and CSS, at the moment there is no way to display the first panel collapsed but I will set that as a feature request to my feature reqeust list.

I have added the following CSS code to the media\com_visforms\css\visforms.min.css

Code:

/*Accordions*/
.collapse {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.35s ease;
	-moz-transition: height 0.35s ease;
	-o-transition: height 0.35s ease;
	transition: height 0.35s ease;
}

.collapse.in {
	height: auto;
}

.accordion {
	margin-bottom: 20px;
}

.accordion-group {
	margin-bottom: 2px;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.accordion-heading {
	border-bottom: 0;
}

.accordion-heading .accordion-toggle {
	display: block;
	padding: 8px 15px;
}

.accordion-toggle {
	cursor: pointer;
}

.accordion-inner {
	padding: 9px 15px;
	border-top: 1px solid #e5e5e5;
}

Regards,
Aicha

Last edit: 7 years 3 weeks ago by Administrator AV.

erichayes
Topic Author
Offline

7 years 3 weeks ago #4870 by erichayes

Replied by erichayes on topic Accordion not displaying well

Yes, that fixed the issue. Thank you very much.

Administrator AV
Offline

7 years 3 weeks ago #4871 by Administrator AV

Replied by Administrator AV on topic Accordion not displaying well

You're welcome.

And thanks for your response. Now I can merge the changes into the Visforms code, and permanently fix the problem.

With the next Subscription release there will also be a new option, where you can choose, whether to display the first panel expanded or collapsed.

Regards,
Aicha

Moderators: Administrator AV, Administrator IV

Joomla 5 Notice

Forum

Accordion not displaying well

Visforms Subscription

Visforms Extensions