[Resolved] Display checkboxes horizontal in postform

[Author]

Posts

[ilonaB-2]

Hello,

I'm trying to display my taxonomies as a set of *horizontal* checkboxes".

So far i haven't been able to do this, and with over 65 taxonomies en thus more than 65 vertical checkboxes, this looks horrible.

I know i can use custom css in the form css editor, but have no idea how to exactly do this.

Can someone help me out please?

Thanks in advance!

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand you have a custom search form where you added the taxonomy filter as checkboxes. Can you please tell me how exactly you want to display the taxonomy checkboxes filter.

Please share problem URL so I can review how its currently behaving.

[ilonaB-2]

Hi good morning Minesh,

Ideally i'd like the checkboxes to be displayed in 3 collums. If possible in alphabetical order.

To be sure how i see this i tried to visualize it making it hopully more understanding for you -> see attached image.

Thanks in advance for your reply.

[ilonaB-2]

Also maybe important:
it could be that i need to add more taxonomies e.g. checkboxes, so it's not a fixed amount of taxonomies

[Minesh]

We do not have any control over how the taxonomy filter options are displayed.

I'm not sure if you are using Toolset Blocks or Classic views to build your search form but here is the doc that you should try to follow to build the custom search for your view using blocks.
=> https://toolset.com/course-lesson/creating-a-custom-search/

Please check the following Doc that should help you to understand where you should add your custom CSS:
= https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/

To format the form you may require additional CSS but that is the custom work as with every project the layout is different.

[ilonaB-2]

Hi Minesh,

Thanks for your reply, but i think you misunderstood me. This has nothing to do with the custom search.

The hyperlinks you just send me, do not explain or give an example on what css code i could use to achieve my goal.

The site visitors who have created an account (by now they are subscribers) on the site can use a Postform to fill their personal profile -> Content template.

The Postform is where the taxonomies are diplayed and the subscriber can select all taxonomies (as checkboxes) that match their skills. See image 1.1 how it is displayed now.
--This Postform isn't visible for regular visitors--

Instead of having all taxonomies underneath one another, like you see in attached image 1.1 (I had to zoom out to take the screenshot because the taxonomies cover 3 pages in current display) i would like to have them displayed horizontal -> See image 1.2

I hope you understand what i'm trying to achieve!

Regards

[Minesh]

Could you please share problem URL where I can see the form as well as admin access details and let me check what we can do there to fix the display of checkboxes.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I've added the following custom CSS code to your form's CSS box:
=> hidden link

.wpt-form-set-checkboxes-specialisatie, .wpt-form-set-checkboxes-project, .wpt-form-set-checkboxes-spreektaal {
  column-count:3;
  column-gap: 2rem;
  list-style: none;
}
.wpt-form-set-checkboxes-specialisatie,.wpt-form-set-checkboxes-project,.wpt-form-set-checkboxes-spreektaal li {
    display:inline-block;
    width:100%;
    
}

You should try to adjust the same CSS code and adjust the class names for your another form.

I can see once you add the above code and check the form on frontend it shows in three columns:
=> hidden link

Please check the following screenshot: hidden link

[ilonaB-2]

Minesh,

You are fantstic! 😉
Thank you so much, this exactly what we wanted.

Just added it to the other form and works perfect!
Thanks again!

My issue is resolved now. Thank you!

[ilonaB-2]

Hi Minesh,
Everything looks great on both desktop and tablet but on a phone it looks terrible.

There is a lot of space (probably 2 or 3 phone-screen lengths) between the upper set of checkboxes, the middle set of checkboxes and the lower set of checkboxes.

Also because on a phone obviously there is less space left and right so the descriptions or overlaping one another, see attached images. I think (if Possible) it would look a lot better with just 2 columns on a mobile...

Could you think of a solution for these problems?

Thanks in advance for your reply!

[ilonaB-2]

Hi Minesh,

I just noticed that the 3 columns look fine on the tablet.

However also on the tablet there are a lot of blank spaces...

Hope you have a good solution fir this.

Have a great evening.

[Minesh]

As I shared you will have to write custom media query CSS form that to adjust the look on every device and that is custom code.

You should try to search on internet or hire a pro CSS expert to fix such custom requirement.

You are also welcome to hire our certified Toolset partners as well:
=> https://toolset.com/contractors/

[ilonaB-2]

Hey minesh,

Thanks for the advise
My issue is resolved now. Thank you!