Forums Forums Search & Filter Pro Top page filterbox with sliders

Viewing 10 posts - 1 through 10 (of 14 total)
  • Anonymous
    #256757

    Hello,

    I am looking for a way to get a top filterbox with sliders and pulldown menu`s like see attached image.
    Spent days reading here and tried many things but can not get it to work as it should.

    Any advise and help would be great.

    My site, Findeq
    Findeq stock with filterbox

    I like to have something like on this site:
    SJH allplant stock
    SJH Allplant stock with filterbox

    Regards,

    Roy

    CSS Used till now :

    .searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
    }
    .searchandfilter[data-sf-form-id=”2918″] select.sf-input-range-select {
    border: 1px solid #aaa;
    padding: 2px 0;
    border-radius: 4px;
    }
    .searchandfilter[data-sf-form-id=”2918″] > ul > li:first-child {
    margin-left: 0;
    padding-top: 0;
    }
    .searchandfilter[data-sf-form-id=”2918″] li.sf-field-search h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding-top: 0;
    }
    .searchandfilter[data-sf-form-id=”2918″] h4 {
    font-size: 10px;
    font-weight:400;
    color: #02213d;
    }
    .searchandfilter[data-sf-form-id=”2918″] select,
    .searchandfilter[data-sf-form-id=”2918″] .select2-container .select2-results__option,
    .searchandfilter[data-sf-form-id=”2918″] .select2-container–default .select2-selection–single .select2-selection__rendered {
    color: green;
    font-size: 10px;
    }
    .searchandfilter[data-sf-form-id=”2918″] select.sf-input-select {
    min-width: auto;
    }.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search input,
    .searchandfilter[data-sf-form-id=”2918″] li.sf-field-search label,
    .searchandfilter[data-sf-form-id=”2918″] .select2-container {
    max-width: 100%;
    }
    .searchandfilter[data-sf-form-id=”2918″] > ul {
    margin: 20px;
    border: 1px solid #02213d;
    padding: 75px;
    background: #f3f3f3;
    }
    .searchandfilter[data-sf-form-id=”2918″] .meta-slider {
    max-width: calc(100% – 10px);
    }
    .searchandfilter[data-sf-form-id=”2918″] li .sf-meta-range.sf-meta-range-slider label {
    width: calc(50% – 9px);
    }
    .searchandfilter[data-sf-form-id=”2918″] li .sf-meta-range.sf-meta-range-slider input {
    width: 100%;
    max-width: 100%;
    font-size: 10px;
    color: #000;
    border-color: #02213d;
    }
    .searchandfilter[data-sf-form-id=”2918″] .select2-container .select2-selection,
    .select2-container–open .select2-dropdown–above {
    border-color: #02013d;
    }
    .searchandfilter[data-sf-form-id=”2918″] .select2-container, .select2-container–open {
    font-size: 10px;
    color: #000;
    }
    .select2-container–open .select2-search–dropdown .select2-search__field {
    border-color: #02213d;
    }

    Anonymous
    #256758

    In addition to the above. I can not get the Width done.
    Also i like to know how to put the search on top and pulldown and sliders below them ?

    Trevor
    #256761

    Hi. The images aren’t links to images?

    Anonymous
    #256765

    Hi Trevor, no also to those sites. Here are the images.

    This one is my current. I am posting CSS Below. Found it here in the forum.

    Below fotoshop is what i would like to achieve. original source is:
    https://www.findeq.eu/stock-like-sjh-allplant

    First row 1 search bar.
    2nd 3 pulldown menu
    3th 3 sliders
    4th some download and info.

    Colors also like in this screenshot. Width like in findeq as machine pictures.

    null

    CSS as i have now:

    .searchandfilter[data-sf-form-id=”2918″] {
    padding: 20px;
    }
    .searchandfilter[data-sf-form-id=”2918″] > ul {
    margin: 0;
    }
    .searchandfilter[data-sf-form-id=”2918″] li.sf-field-search input,
    .searchandfilter[data-sf-form-id=”2918″] li.sf-field-search label,
    .searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”select”] label,
    .searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”select”] select,
    .searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”daterange”] label,
    .searchandfilter[data-sf-form-id=”2918″] .select2-container {
    min-width: 100%;
    }

    Anonymous
    #256767

    Next try to show the pictures:

    Current site with css filterbox

    This is what i like to achieve see above  text

    Trevor
    #256782
    This reply has been marked as private.
    Anonymous
    #256861

    Hello Trevor, no problem i allready left my office. Hope to hear from you today.

    Anonymous
    #256878

    Meanwhile i added all fields in Search and Filter, search form.

    See here : https://www.findeq.eu/equipment_available

    Trevor
    #256919
    This reply has been marked as private.
    Anonymous
    #256936
    This reply has been marked as private.
Viewing 10 posts - 1 through 10 (of 14 total)