Skip Navigation

[Resolved] Checkboxes inline layout

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 4 replies, has 2 voices.

Last updated by bouchairY 5 years, 10 months ago.

Assisted by: Beda.

Author
Posts
#632064

Hello
How to display checkboxes in inline style ?
hidden link

Thank you

#634459

By applying Custom CSS:

When you insert Custom Filters in Toolset Views you can decide whether to apply "Fully styled output" (It uses Bootstrap) or "Raw output" (it will output a minimal HTML so you can customize it more freely).

With fully styled output the single Checkboxes are wrapped in a DIV, and usually, you will not put several DIV's inline.
Hence I suggest using the "Raw output" when inserting the Filter as a set of checkboxes.

If you do that, the checkboxes will become an unordered list.
This can then easily be modified by CSS as outlined here in this "tutorial":
hidden link

#634577
check2.png
check1.jpg

Hello
Is it already in "Raw output" format but there are no "

    " or "

  • " !!!
    Thank you
#634705

It depends what source the filter has.

For taxonomies, it's a list, for Custom fields not.
For fields, it's again a DIV.
I added a Screenshot.

Something like this should do, to align those horizontally:

<div id="out">
  [wpv-control-postmeta field="wpcf-image-id" type="checkboxes" url_param="wpv-wpcf-image-id" output="legacy" class="class"]
</div>

CSS:

.out {
  width: 100%;
  margin: 0 auto;
}
.form-item-checkbox {
  width: 100px;
  display: inline-block
}
#634837

Thank you

The forum ‘Types Community Support’ is closed to new topics and replies.

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