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 4 years, 4 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.

Our next available supporter will start replying to tickets in about 2.09 hours from now. Thank you for your understanding.

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 4 years, 4 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

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!