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

Viewing 10 results - 61 through 70 (of 142 total)
  • Author
    Search Results
  • #253484

    In reply to: Style Codes


    Trevor
    Participant

    Simple then:

    .searchandfilter[data-sf-form-id="16337"] h4 {
      font-size: 17px;
    }
    #253381

    In reply to: Style Codes


    Trevor
    Participant

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

    Normally, something like this will center the form:

    .searchandfilter[data-sf-form-id="1428"] > ul {
      display: table;
      margin: 0 auto;
    }
    #253110

    In reply to: Formatting questions


    Trevor
    Participant

    Something like this I think:

    .searchandfilter[data-sf-form-id="1133"] ul {
        padding-left: 0;
        display: table;
        margin: 0 auto;
    }
    .searchandfilter[data-sf-form-id="1133"] li {
        padding: 0;
        margin-right: 10px;
    }
    .searchandfilter[data-sf-form-id="1133"] li:last-child {
        margin-right: 0px;
    }
    .searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-length select.sf-input-select {
        min-width: 120px;
    }
    .searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-equipment select.sf-input-select {
        min-width: 150px;
    }
    .searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-focus select.sf-input-select {
        min-width: 155px;
    }
    .searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-level select.sf-input-select {
        min-width: 130px;
    }
    .searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-class_type select.sf-input-select {
        min-width: 150px;
    }

    I am hoping select2 will then copy the widths over.

    #253086

    In reply to: Formatting questions


    Trevor
    Participant

    Hi, you also need to change the script to Select2. We will be moving to that as standard in our next major release, as Chosen is now abandoned. It is found here:

    https://www.screencast.com/t/swKsAD6kB

    Some CSS to start you off:

    .searchandfilter[data-sf-form-id="1133"] .sf-field-submit input {
        font-size: 14px;
        border-radius: 5px;
        padding: 3px 7px;
        border: 1px #a4a4a4 solid;
    }
    .searchandfilter[data-sf-form-id="1133"] .sf-field-submit:before {
        content: "";
        display: block;
        height: 32px;
        width: 25px;
    }
    #252266

    Trevor
    Participant

    Maybe this:

    .searchandfilter[data-sf-form-id="22914"] > ul > li {
    	display: inline-block;
    	vertical-align: top;
    	padding-right: 20px;
    }
    .searchandfilter[data-sf-form-id="22914"] .sf-field-reset {
        display: block;
    }
    #252013

    In reply to: Search box width


    Trevor
    Participant

    This custom CSS should do it:

    .searchandfilter[data-sf-form-id="8213"] .sf-field-search label {
      width: 100%;
      padding-right: 5px;
    }

    I had to add 5px right padding because you had added this CSS already:

    .searchandfilter ul li {
        background-color: #efefef;
        padding: 20px 15px 20px 20px;
    }

    Where the right padding was only 15px, whereas the left padding is 20px, so it looked odd otherwise.

    #250781

    Trevor
    Participant

    Does this CSS work for you?

    .searchandfilter[data-sf-form-id="20636"] .sf-field-search input.sf-input-text[type="text"] {
      border-radius: 20px;
      border: 2px dotted #aaa;
    }
    .searchandfilter[data-sf-form-id="20636"] ul {
      padding-left: 0;
    }
    .searchandfilter[data-sf-form-id="20636"] ul {
      display: table;
      margin: 0 auto;
    }

    Anonymous
    Inactive

    Hi,
    the serach&filter function is great while the styling of the filters lacks usability & valueable options!

    I have multiple filters horizontal filter set up (1) in one search form, acf group fields in place and no nested taxonomies (2) and try to place them via (3) and use the searchform via shortcode inside elemtor pro.

    Given I check “Hide empty items?” in searchfilter Admin settings, then in the front-end after each filter change all filters “jump” around (accordingly to the fact, that option are lower) => this makes them uncontrolable with regards to styling.
    => unhide empty items would fix the jumping but will be an ux mess (& not the intention)
    Question:
    – Is there a way to have the items “hide empty items” checked (not shown in the filter option) but also have the length of the filter field fixed?

    Feedback appreciated
    Thanks in advance
    Onur

    btw:
    Style of Combobox is nice – but as “date & price range&input fields” don’t have this option, their style won’t go together with the “combobox” – style of txonomy filters – is there a way to style the input fields accordingly?

    btw2:
    v3 will have fixes for some filter frontend styling lacks?

    ——-
    (1)
    .searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
    }
    ————
    (2) https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166 – did all of that
    ————
    (3)
    .searchandfilter[data-sf-form-id=”1428″] .select2-container {
    margin: 5px;
    }
    from: https://support.searchandfilter.com/forums/search/filter+style/

    #250053

    Trevor
    Participant

    A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.

    As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.

    You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.

    If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:

    .searchandfilter[data-sf-form-id="1428"] .select2-container {
      margin: 5px;
    }

    So, I would need to see what you are trying to change (a live link/URL), and with what CSS.

    #249905

    In reply to: Styling form


    Trevor
    Participant

    I think this would do that for you:

    .searchandfilter[data-sf-form-id="971"] > ul > li.sf-field-submit,
    .searchandfilter[data-sf-form-id="971"] > ul > li.sf-field-reset {
      min-width: auto;
    }
Viewing 10 results - 61 through 70 (of 142 total)