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

Viewing 10 results - 41 through 50 (of 142 total)
  • Author
    Search Results
  • #260191

    Trevor
    Participant

    This would need to be inside some responsive media query so it only applies to desktop?

    .entry-content .searchandfilter[data-sf-form-id="598"] li.sf-field-taxonomy-download_tag > ul {
        columns: 3;
    }
    .entry-content .searchandfilter[data-sf-form-id="598"] li.sf-field-taxonomy-download_tag > ul > li {
        margin-bottom: 0;
    }
    #259646

    Trevor
    Participant

    Can you remove these blocks that I gave you:

    .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li {
        margin-left: 10px;
    }
    .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li:first-child {
        margin-left: 0;
    }

    and replace with this:

    .searchandfilter[data-sf-form-id="169924"] ul > li[data-sf-field-input-type=checkbox] > ul > li > label {
        padding-left: 0;
    }
    .searchandfilter[data-sf-form-id="169924"] li.sf-field-taxonomy-mars_category > ul > li {
        padding: 10px 0 10px 10px;
    }
    .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li {
        display: inline-block;
    }
    .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li {
        margin-right: 10px;
    }
    #259522

    In reply to: Display Results


    Trevor
    Participant

    I will take the first post:

    Your theme has this CSS:

    .traveltour-body h4 {
        color: #383838;
        font-size: 28px;
        font-family: "Poppins", sans-serif;
        margin-top: 0px;
        margin-bottom: 20px;
        line-height: 1.2;
        font-weight: 700;
    }

    To control this, you need custom CSS like this:

    `.traveltour-body .searchandfilter[data-sf-form-id=”22″] h4 {
    /* CSS rules */
    }

    To the second question:

    I am not sure if that date will be a problem in that format. Maybe, maybe not. You would need to test. Ideally, it should be 20200918 for example. It should not matter that it is not datetime.

    At the moment, you need to use both From and To. The To field can be hidden, and you can use JavaScript to fill it with a long away date when the page opens. We will change/enhance the form field date match/range options in V3, due in a few months.

    #259243

    Trevor
    Participant

    I can see that something is applying ‘Nice Select’ javascript to our select box (maybe your theme), which is hiding our field and showing a different field, but it is not copying across the terms. That you would need to talk with the theme author about (probably best to stop it from doing that). Some custom CSS could hide the nice select version of the field and reveal our field. For example:

    .searchandfilter[data-sf-form-id="4693"] .sf-input-select:not(.nice-select) {
        display: inline-block !important;
    }
    .searchandfilter[data-sf-form-id="4693"] .sf-input-select.nice-select {
        display: none;
    }
    #259074

    In reply to: Horizontal serach bar


    Trevor
    Participant

    This custom CSS should get you started for desktop:

    @media (min-width: 768px) {
      .searchandfilter[data-sf-form-id="4680"] > ul {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-top: 20px
      }
      .searchandfilter[data-sf-form-id="4680"] ul,
      .searchandfilter[data-sf-form-id="4680"] > ul > li:first-child {
        margin-left: 0;
      }
      .searchandfilter[data-sf-form-id="4680"] > ul > li {
        display: inline-flex;
        margin-left: 20px;
        padding: 0;
      }
      body[data-fancy-form-rcs="1"] .searchandfilter[data-sf-form-id="4680"] .fancy-select-wrap {
        padding-top: 0;
      }
    }
    #258369

    Trevor
    Participant

    OK. You already have many CSS rules added for the form. You need to remove all of what you have (especially the !important ones). It might not be perfect, but it will get you there for desktop view:

    .searchandfilter[data-sf-form-id="4617"] > ul {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 30px;
    }
    .searchandfilter[data-sf-form-id="4617"] > ul > li {
      float: left;
    }
    .searchandfilter[data-sf-form-id="4617"] ul {
      margin-left: 0px;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-field-submit {
      clear: both;
    }
    .searchandfilter[data-sf-form-id="4617"] h4 {
      font-size: 1.9rem;
      display: inline-block;
      min-width: 160px;
      flex-grow: 0;
    }
    .searchandfilter[data-sf-form-id="4617"]  .sf-field-search h4 {
      padding-top: 10px;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-audience h4,
    .searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-resource_type h4 {
      min-width: 200px;
    }
    .searchandfilter[data-sf-form-id="4617"] {
      border: 1px solid #cccbcb;
    }
    .searchandfilter[data-sf-form-id="4617"] ul li.sf-field-reset > input[type=submit],
    .searchandfilter[data-sf-form-id="4617"] ul li.sf-field-submit > input[type=submit] {
      background-color: #312d7a;
      color: #fff;
    }
    .searchandfilter[data-sf-form-id="4617"] > ul > li {
      flex-grow: 1;
    }
    .searchandfilter[data-sf-form-id="4617"] p {
      display: inline-block;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-field-search p {
      flex-grow: 1;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-field-search label {
      width: 75%;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-input-text {
      border-radius: 1.75rem;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-input-text {
      width: 100%;
    }
    .searchandfilter[data-sf-form-id="4617"] > ul > li > p > label br {
      display: none;
    }
    .searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-reset,
    .searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-submit {
      flex-grow: 0;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-field-reset {
      padding-left: 10px;
    }
    .searchandfilter[data-sf-form-id="4617"] .sf-field-search {
      flex: 0 0 100%;
      display: flex;
    }
    .searchandfilter[data-sf-form-id="4617"] select.sf-input-select {
      min-width: 300px;
      width: auto;
    }
    #258253

    In reply to: border radius CSS


    Trevor
    Participant

    You have this:

    .sf-field-search input, .sf-field-search label {
        display: block !important;
        width: 100% !important;
        border-radius: 30px;
    }

    You should use this:

    .searchandfilter[data-sf-form-id="15236"] .sf-field-search input, .sf-field-search label {
        display: block;
        width: 100%;
        border-radius: 30px;
    }
    .searchandfilter[data-sf-form-id="15236"] li[data-sf-field-input-type="select"] select,
    .searchandfilter[data-sf-form-id="15236"] .sf-field-submit input {
        border-radius: 30px;
    }

    Please note that we are now closed for the day as it is gone 5PM here in the UK. For any further replies, I will be back on again tomorrow.

    #257666

    Trevor
    Participant

    This search of our forum should give some snippets of how to style the form, but your theme might be overriding the CSS, in which case are you able to send me a live link/URL to your search page so I can take a look? Let me know which elements are resisting styling, and what CSS you had tried that did not work.

    The search:

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

    #256872

    In reply to: How to change color?


    Trevor
    Participant

    You would need to make sure the specificity is correct. This is our standard slider CSS for that color (I believe):

    .searchandfilter .noUi-connect {
        background-color: #526E91;
    }

    So you would need custom CSS, something like:

    .searchandfilter[data-sf-form-id="1234"] .noUi-connect {
        background-color: #ccc;
    }

    Where you would change the ID to match that of your form, and the color to what you want it to be.

    #256765

    Anonymous
    Inactive

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

Viewing 10 results - 41 through 50 (of 142 total)