Forums › Forums › Search & Filter Pro › Another make-the-boxes-horizontal question

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Anonymous
    (Private)  October 27, 2019 at 11:50 pm #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
    (Private)  October 28, 2019 at 12:47 pm #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
    (Private)  October 28, 2019 at 12:47 pm #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
    (Private)  October 28, 2019 at 1:03 pm #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
    (Private)  October 29, 2019 at 2:00 pm #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
    (Private)  October 29, 2019 at 5:09 pm #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
    (Private)  October 29, 2019 at 7:20 pm #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
    (Private)  October 29, 2019 at 7:43 pm #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
    (Private)  October 29, 2019 at 8:04 pm #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
    (Private)  October 29, 2019 at 10:34 pm #225063

    Excellent – thanks so much!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 11 total)
1 2