Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › How to display filter form horizontally

Viewing 10 posts - 11 through 20 (of 26 total)
1 2 3
  • Trevor Moderator
    (Private)  September 1, 2020 at 10:50 am #257927

    I apologise for the delay in replying, caused by the weekend and yesterday (Monday) was a national holiday in England. I am now working my way through the backlog of tickets.

    You would need to add this CSS:

    .searchandfilter > ul {
  display: table;
}
.searchandfilter > ul > li {
  float: left;
}
.searchandfilter ul li.sf-field-submit {
  clear: both;
}
    Nikunj Vala
    (Private)  September 1, 2020 at 9:20 pm #258035
    This reply has been marked as private.
    Nikunj Vala
    (Private)  September 2, 2020 at 3:05 pm #258151
    This reply has been marked as private.
    Trevor Moderator
    (Private)  September 2, 2020 at 3:25 pm #258164
    This reply has been marked as private.
    Nikunj Vala
    (Private)  September 2, 2020 at 3:55 pm #258189
    This reply has been marked as private.
    Nikunj Vala
    (Private)  September 2, 2020 at 4:45 pm #258209
    This reply has been marked as private.
    Nikunj Vala
    (Private)  September 2, 2020 at 7:18 pm #258224
    This reply has been marked as private.
    Trevor Moderator
    (Private)  September 2, 2020 at 10:41 pm #258267
    This reply has been marked as private.
    Nikunj Vala
    (Private)  September 3, 2020 at 1:38 am #258283
    This reply has been marked as private.
    Trevor Moderator
    (Private)  September 3, 2020 at 12:27 pm #258369

    OK. You already have many CSS rules added for the form. You need to remove all of what you have (especially the !important ones). It might not be perfect, but it will get you there for desktop view:

    .searchandfilter[data-sf-form-id="4617"] > ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 30px;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
  float: left;
}
.searchandfilter[data-sf-form-id="4617"] ul {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-submit {
  clear: both;
}
.searchandfilter[data-sf-form-id="4617"] h4 {
  font-size: 1.9rem;
  display: inline-block;
  min-width: 160px;
  flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"]  .sf-field-search h4 {
  padding-top: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-audience h4,
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-resource_type h4 {
  min-width: 200px;
}
.searchandfilter[data-sf-form-id="4617"] {
  border: 1px solid #cccbcb;
}
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-reset > input[type=submit],
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-submit > input[type=submit] {
  background-color: #312d7a;
  color: #fff;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
  flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] p {
  display: inline-block;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search p {
  flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search label {
  width: 75%;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
  border-radius: 1.75rem;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
  width: 100%;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li > p > label br {
  display: none;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-reset,
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-submit {
  flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-reset {
  padding-left: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search {
  flex: 0 0 100%;
  display: flex;
}
.searchandfilter[data-sf-form-id="4617"] select.sf-input-select {
  min-width: 300px;
  width: auto;
}
  • Author
    Posts
Viewing 10 posts - 11 through 20 (of 26 total)
1 2 3

The forum ‘Search & Filter Pro’ is closed to new topics and replies.