Support Forums

The forums are closed and will be removed when we launch our new site.

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

Forums › Forums › Search & Filter Pro › Placeholder

Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Johnathan.PRO
    (Private)  May 25, 2017 at 6:16 am #111145

    I’m designing a project that has to comply with provided PSDs as much as possible. One of the requirements is a magnifying glass as a search placeholder within the textbox. I used a unicode icon to comply as much as possible without breaking plugin conventions, but the sponsor wasn’t satisfied. I need to be able to use a specific icon and need guidance on how accomplish through a CSS edit.

    Trevor Moderator
    (Private)  May 25, 2017 at 1:49 pm #111256

    You could use Custom CSS to style the placeholder to use FontAwesome font, and then use the FA code for the search icon & # x f 0 0 2 ;. Maybe? I had to put spaces between each character, so do remove them!!!

    Johnathan.PRO
    (Private)  May 25, 2017 at 4:53 pm #111310

    I have tried Better FontAwesome plugin already (https://snag.gy/eD50XT.jpg) and that icon using both fa-search and then the actual html values, but it turns into an empty square (https://snag.gy/eudryf.jpg) and your plugin converts it to that in the admin (https://snag.gy/yrSm9s.jpg). So any advice on how to accomplish this would be great.

    Trevor Moderator
    (Private)  May 26, 2017 at 3:01 pm #111459

    Assuming you have font awesome working/loading, can you show me the page (URL/link) when putting the code that I said to use?

    Johnathan.PRO
    (Private)  May 26, 2017 at 8:35 pm #111564
    This reply has been marked as private.
    Johnathan.PRO
    (Private)  May 26, 2017 at 8:35 pm #111566
    This reply has been marked as private.
    Trevor Moderator
    (Private)  May 30, 2017 at 10:02 am #111911

    Apologies for the delay in responding. Your last reply arrived after we closed our support for the weekend (our normal support hours are Monday – Friday 10am – 5pm GMT) and Monday was a national holiday in the UK.

    The CSS for the placeholder (in this case to make its font family font awesome) is a bit complicated to supported most browsers:

    .sf-field-search .sf-input-text::-webkit-input-placeholder {
  font-family: 'FontAwesome';
}
.sf-field-search .sf-input-text::-moz-placeholder {
  font-family: 'FontAwesome';
}
.sf-field-search .sf-input-text:-ms-input-placeholder {
  font-family: 'FontAwesome';
}
.sf-field-search .sf-input-text:-moz-placeholder {
  font-family: 'FontAwesome';
}
    Johnathan.PRO
    (Private)  May 30, 2017 at 6:31 pm #112096

    Unfortunately this solution didn’t work either so the solution I came up with was to copy the code produced by your search widget and then alter the placeholder attribute with the following solution…

    <form data-sf-form-id=’276′ data-is-rtl=’0′ data-maintain-state=” data-results-url=’/results’ data-ajax-url=’/?sfid=276&sf_action=get_data&sf_data=results’ data-ajax-form-url=’/?sfid=276&sf_action=get_data&sf_data=form’ data-display-result-method=’shortcode’ data-use-history-api=’1′ data-template-loaded=’0′ data-lang-code=” data-ajax=’1′ data-ajax-data-type=’json’ data-ajax-target=’#search-filter-results-276′ data-ajax-pagination-type=’normal’ data-ajax-links-selector=’.pagination a’ data-update-ajax-url=’1′ data-only-results-ajax=’1′ data-scroll-to-pos=’0′ data-init-paged=’1′ data-auto-update=’1′ action=’/results’ method=’post’ class=’searchandfilter’ id=’search-filter-form-276′ autocomplete=’off’ data-instance-count=’1′>

      <li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”” style=”font-family:Arial, FontAwesome” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

    </form>

    Johnathan.PRO
    (Private)  May 30, 2017 at 6:32 pm #112098

    Unfortunately the unicode got converted by the text window.

    Trevor Moderator
    (Private)  May 30, 2017 at 6:34 pm #112100

    That’s OK. Most bb board forums allow you to enclose code with back ticks (the key next to the 1 key) to stop that from happening. Is this issue now resolved?

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

The topic ‘Placeholder’ is closed to new replies.