Another make-the-boxes-horizontal question

Anonymous

#224735

I have a form for which I would like to make the checkboxes show up horizontally rather than vertically. I attempted to use CSS code that I saw in other posts, but it is not having the desired effect. Can you tell me how to do this for a form with id=”123″?

Thanks!

Trevor

#224771

This is the basic code that should be used, per the documentation here:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

.searchandfilter > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}

Trevor

#224773

I would add that is that does not work, are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#224775

That is what I tried. Here is a link to the page where you can see them appearing vertically: http://dev.bearcreations.org/recognition/ (I have the control twice temporarily – the first one is in a full-width block just to ensure that the verticality is not a result of space limitation.)

Thanks for any help you can provide.

Trevor

#224978

Ah. It is not form fields that you want to make horizontal, as you have only one field. You want to make the terms run horizontally within the category field.

You may need to remove what you had used, and use this:

.searchandfilter .sf-field-category > ul > li {
  display: inline-block;
  margin-right: 20px;
}
.searchandfilter ul {
  margin: 0;
}

Anonymous

#225037

That did the trick – thanks!

One other thing that would be nice if possible is to have the checkboxes in line with the label itself, i.e.:

Show: box1 box2

instead of:

Show:
box1 box2

Is that possible?

Trevor

#225050

It is possible, but you don’t appear to have set a heading for that field?

As it is, you have added something else to give the same effect, yes?

Anonymous

#225054

Correct, although I would rather use the search form heading if I could get it to display that way. I’ll put in such a heading now as an example.

Trevor

#225057

.searchandfilter .sf-field-category h4 {
  display: inline-block;
  font-size: 18px;
}
.searchandfilter[data-sf-form-id="262"] .sf-field-category > ul {
  display: inline-block;
  margin-left: 10px;
}

Anonymous

#225063

Excellent – thanks so much!

[Author]

Posts