[Resolved] Checkboxes inline layout

[Author]

Posts

[bouchairY]

Hello
How to display checkboxes in inline style ?
hidden link

Thank you

[Beda]

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

[bouchairY]

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

" or "
• " !!!
  Thank you

[Beda]

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
}

[bouchairY]

Thank you