Support Forums

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Formatting search box and fields

Tagged: ,

Viewing 10 posts - 1 through 10 (of 22 total)
1 2 3
  • Cristina Morbidoni
    (Private)  June 30, 2020 at 11:33 am #250620

    Hello. (Using the Pro version) I have read you are working on a new plugin version. Where can I know which new features or improvements we will find. I whish so much that each field in each field form will be easily formatted not only through css but through search form settings when creating. I’m currently struggling for getting a nice layout for a search form that doesn’t position on the left (leaving an ugly white space) and trying the search field could clean after each search without adding a reset button. Could you help me while waiting for V3? Thanks

    Trevor Moderator
    (Private)  June 30, 2020 at 2:20 pm #250663

    V3 is due in a few months, and it will offer improved ways to format the forms, yes.

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

    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?

    Cristina Morbidoni
    (Private)  June 30, 2020 at 4:21 pm #250700
    This reply has been marked as private.
    Trevor Moderator
    (Private)  June 30, 2020 at 5:24 pm #250727

    If there is a place where you entered all the CSS, so it is easy to remove, let me know here what you wrote. Paste it here inside code tags (it is the back tick symbol, on my UK keyboard it is next to the 1 key).

    Then remove the code so I can start with a clean sheet.

    I will be back on this tomorrow, as we are now closed for the evening.

    Cristina Morbidoni
    (Private)  June 30, 2020 at 8:10 pm #250738
    This reply has been marked as private.
    Cristina Morbidoni
    (Private)  June 30, 2020 at 8:26 pm #250740

    Sorry, forget the previous code:

    
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    width: 100%;
    border: 2px dotted #aaa;
    border-radius: 25px;
    padding: .2rem .5rem;
    transition: all .3s;
    font-size: 14px;
    font-weight: 500;
}

.searchandfilter ul li {
    list-style: none;
    display: inline-flex;
    padding: 10px 10px;
    margin: 0;
    border-radius: 20px !important;
}
    Trevor Moderator
    (Private)  July 1, 2020 at 8:32 am #250779

    I am working on this now for you, but one thing I need to mention that is important. You have the same search form twice in the page. It MIGHT work, but often, doing this (having more than one instance of the same form, or even multiple forms) will mean that they don’t work together. Just be aware that this is possible, so if you have problems with the results not working, that might be why. Normally, we suggest only one form instance on the results page.

    Trevor Moderator
    (Private)  July 1, 2020 at 8:41 am #250781

    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;
}
    Cristina Morbidoni
    (Private)  July 1, 2020 at 2:16 pm #250902
    This reply has been marked as private.
    Trevor Moderator
    (Private)  July 1, 2020 at 2:25 pm #250916

    It all works now?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 22 total)
1 2 3

The topic ‘Formatting search box and fields’ is closed to new replies.