Forums › Forums › Search & Filter Pro › S&F Horizontal the final solution

Viewing 5 posts - 1 through 5 (of 5 total)
  • Anonymous
    (Private)  April 26, 2016 at 9:42 am #43911

    Hi guys,
    I’m trying to make an horizontal version of your S&F bar.

    I’m using 3 fields but it can be applied to more or less.

    What I’ve done so far (I’ve did this css just for this specific S&F form):

    .searchandfilter[data-sf-form-id="2545"] > ul > li {
	display:inline-block !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-search {
  width: 40%;
  padding-right:10px !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-tag {
  width: 40%;
  padding-right:10px !important;
}

.searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi {
    width: 100% !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-category {
    width: 20% !important;
}

.searchandfilter[data-sf-form-id="2545"] select.sf-input-select {
    width: 100%;
}

    So far so good. I used % in order to fill the full width. I also added the 10px padding-right just to the first 2 elements.

    The only issue I’m facing is that the tag field is formatted differently than the other 2 (different border, font size etc).

    Also I would like to change this horizontal view for tables and smartphone to bring it back to 1 field per row.

    Any advice?

    link to my test page: test.degeneration.it

    Anonymous
    (Private)  April 26, 2016 at 9:45 am #43912

    Sorry wrong URL.

    This is the right one: test.degenerationit.com

    Anonymous
    (Private)  April 26, 2016 at 10:13 am #43914

    Ok this is the final result with consistency:

    .searchandfilter[data-sf-form-id="2545"] > ul > li {
	display:inline-block !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-search {
  width: 40%;
  padding-right:10px !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-tag {
  width: 40%;
  padding-right:10px !important;
}

/* format tag fields for consistency */
.searchandfilter[data-sf-form-id="2545"] .chosen-container-multi .chosen-choices {
    display: inline-block;
    height: 2.65em !important;
    margin-bottom: 0px;
    border: 1px solid #ddd;
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
} 

.searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi {
    width: 100% !important;
      margin-top: -5px !important;
}

.searchandfilter[data-sf-form-id="2545"] input.default {
border-color: rgba(0,0,0,0.3);
    outline: 0;
    outline: thin dotted \9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
  -webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
    transition: border linear 0.2s,box-shadow linear 0.2s;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-category {
    width: 20% !important;
}

.searchandfilter[data-sf-form-id="2545"] select.sf-input-select {
    width: 100%;
}

    Hope can help a lot of people that are trying to have an horizontal view for S&F.

    Now I just need to edit the @media CSS for smartphones and tablets.

    Trevor
    (Private)  April 26, 2016 at 10:50 am #43917

    Cool. Thanks for sharing 🙂

    Anonymous
    (Private)  April 26, 2016 at 10:51 am #43918

    Thanks to you guys Ross and you really help us a lot.
    Wanted to give something back.

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