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 › form fields horizontally on two lines

Viewing 6 posts - 1 through 6 (of 6 total)
  • Gianluca Di Fazio
    (Private)  May 5, 2020 at 3:00 pm #242674

    Hello,
    I would like to know which CSS code to use to align the form fields horizontally on two lines.
    the fields of the second row aligned with those of the first.
    and how to make the input fields more subtle
    thanks

    Trevor Moderator
    (Private)  May 5, 2020 at 3:05 pm #242677

    You may have to use custom CSS to split the form into columns.

    Are you able to send me a live link/URL to your search page so I can take a look?

    I am not sure what you mean by ‘more subtle’. My guess is you want to change the styling. Are you able to show me a form that is more as you want it to look?

    Gianluca Di Fazio
    (Private)  May 5, 2020 at 3:11 pm #242678

    http://www.boozenetwork.it/immobiliare/immobili/

    I would like this

    http://www.dibattistaimmobiliare.com/r/annunci/vendita-.html?Codice=&Tipologia%5B%5D=0&Motivazione%5B%5D=1&Provincia=0&Comune=0&Prezzo_da=&Prezzo_a=&Totale_mq_da=&Totale_mq_a=&cf=yes

    thank you

    Trevor Moderator
    (Private)  May 6, 2020 at 11:39 am #242800

    My first attempt. Replace what you have:

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

    … with this:

    .searchandfilter[data-sf-form-id="420"] ul {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="420"] > ul > li > label,
.searchandfilter[data-sf-form-id="420"] > ul > li > label > select.sf-input-select,
.searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-search > label > input {
  min-width: 100%;
}
@media only screen and (max-width: 1024px) {
  .searchandfilter[data-sf-form-id="420"] > ul > li {
    min-width: 270px;
  }
}
@media only screen and (min-width: 768px) {
  .searchandfilter[data-sf-form-id="420"] > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 20px;
    min-width: 370px;
  }
  .searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-post-meta-tipologia:before,
  .searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-post-meta-comune:before {
    content: "";
    display: block;
    height: 32px
  }
}
@media only screen and (max-width: 767px) {
  .searchandfilter[data-sf-form-id="420"] > ul > li > label,
  .searchandfilter[data-sf-form-id="420"] > ul > li > label > select.sf-input-select,
  .searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-search > label > input {
    min-width: 100%;
  }
  .searchandfilter[data-sf-form-id="420"] > ul > li[data-sf-field-input-type="range-slider"] > .meta-slider {
    max-width: none;
    margin-right: 10px;
  }
}
    Gianluca Di Fazio
    (Private)  May 6, 2020 at 1:54 pm #242812

    Perfect thank you

    Trevor Moderator
    (Private)  May 7, 2020 at 6:42 am #242940

    Thanks for letting me know. I will close this thread for now.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘form fields horizontally on two lines’ is closed to new replies.