Issue with dropdown

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user is building a collapsible section in the view filters. The section switch from 2 columns design to 1 column design

Solution:
The user was using

display:block

when he should use

display:grid

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic is split from https://toolset.com/forums/topic/post-form-style-issue/

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 2 replies, has 2 voices.

Last updated by WeiS2074 3 years, 9 months ago.

Assisted by: Jamal.

Author

Posts

July 23, 2020 at 5:29 pm #1716381

WeiS2074

Additional, I introduce a collapsible button, it works, but when it expands the Toolset Grid will become from 2 column to 1 column. How do I fix this?
a button
<button type="button" class="collapsible">More filter</button>

A css
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

A JS
var content = document.getElementById("filter-grid");
var coll = document.getElementsByClassName("collapsible");

var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
console.log(this.innerText);
this.innerText = "Less filter";

if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

July 23, 2020 at 5:44 pm #1716391

Jamal

Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

I believe that you should use "grid" instead of "block" in your custom Javascript code.

if (content.style.display === "block") {
  content.style.display = "none";
} else {
  content.style.display = "block";
}
});

July 23, 2020 at 11:53 pm #1716727

WeiS2074

My issue is resolved now. Really appreciated!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.