Forums Forums Search Search Results for 'data-sf-form-id .searchandfilter'

Viewing 10 results - 51 through 60 (of 142 total)
  • Author
    Search Results
  • #256757

    Anonymous
    Inactive

    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;
    }

    #255932

    Trevor
    Participant

    The code needed to make it 100% wide is a modification of what you already have, this bit:

    .searchandfilter[data-sf-form-id=”2703″] li.sf-field-search input,
    .searchandfilter[data-sf-form-id=”2703″] li.sf-field-search label,
    .searchandfilter[data-sf-form-id=”2703″] .select2-container {
    min-width: 100%;
    }

    Needs to be:

    .searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
    .searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
    .searchandfilter[data-sf-form-id="2703"] li[data-sf-field-input-type="select"] .select2-container,
    .searchandfilter[data-sf-form-id="2703"] li[data-sf-field-input-type="select"] label {
      min-width: 100% !important;
      width: 100% !important;
    }

    You have set the font in some places in your code to black, e.g.:

    .searchandfilter[data-sf-form-id=”2703″] .select2-container, .select2-container–open {
    font-size: 14px;
    color: #000;
    }

    It is here that the font and font color may need to be set.

    #255779

    Trevor
    Participant

    To remove the search box on the fields, change them back to normal dropdown selects, and see this post (some of the suggestions I think you have done already):

    https://support.searchandfilter.com/forums/topic/css-dropdown-option-active-hover/#post-249903

    As to the font color, there should be some CSS snippets in this forum search that will help you:

    https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id+color+select2/

    I am not sure what you mean by “I would also like the arrow like I have right now instead of the ‘plus’ and ‘minus’ signs.” You already have dropdown arrows?

    #255534

    In reply to: Problems


    Trevor
    Participant

    This Custom CSS should improve the layout:

    .searchandfilter[data-sf-form-id="421"] ul {
        padding-left: 0;
    }
    .searchandfilter[data-sf-form-id="421"] .sf-range-max,
    .searchandfilter[data-sf-form-id="421"] .sf-range-min {
        max-width: 110px;
    }
    #255492

    In reply to: Mobile Width Css Help


    Trevor
    Participant

    Try adding this additional CSS:

    .searchandfilter[data-sf-form-id="6646"] select.sf-input-select {
        min-width: auto;
    }
    .searchandfilter[data-sf-form-id="6646"] li.sf-field-search input,
    .searchandfilter[data-sf-form-id="6646"] li.sf-field-search label,
    .searchandfilter[data-sf-form-id="6646"] .select2-container {
      max-width: 100%;
    }
    #255348

    In reply to: Mobile Width Css Help


    Trevor
    Participant

    That CSS looks wrong. The first bit of code you appear to need is this:

    .searchandfilter[data-sf-form-id="6646"] ul {
      padding-left: 0;
    }

    The CSS you gave me should surely be max-width, not min-width, if it is for mobile only?

    And it is missing a pair of curly braces:

    @media (min-width: 600px) {
      .searchandfilter[data-sf-form-id="6646"] {
        min-width: 50px;
      }
    }

    Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

    #254999

    Trevor
    Participant

    I think this custom CSS makes it look better?

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

    Trevor
    Participant

    To make the form Horizontal, see here:

    https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

    There are many other customising snippets in the forums:

    https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id/

    That code you tried will likely not work. Are you able to send me a live link/URL to your search page so I can take a look?

    #253995

    Trevor
    Participant
    #253488

    In reply to: Style Codes


    Trevor
    Participant

    Is it OK to close this thread for now? If you do this forum search, you will find tons of snippets:

    https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id/

Viewing 10 results - 51 through 60 (of 142 total)