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

Tagged: ,

Viewing 10 posts - 1 through 10 (of 22 total)
1 2 3
  • Anonymous
    (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
    (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?

    Anonymous
    (Private)  June 30, 2020 at 4:21 pm #250700
    This reply has been marked as private.
    Trevor
    (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.

    Anonymous
    (Private)  June 30, 2020 at 8:10 pm #250738
    This reply has been marked as private.
    Anonymous
    (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
    (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
    (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;
}
    Anonymous
    (Private)  July 1, 2020 at 2:16 pm #250902
    This reply has been marked as private.
    Trevor
    (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