Geek Answers Handbook

Style Autocomplete with Zurb Foundation

What is the best practice of using Foundation functions instead of jQuery CSS for autocomplete?

Here is my code: http://jsfiddle.net/qhoc/88kfb/

<div class="row"> <form class="custom"> <fieldset> <legend>Fieldset</legend> <div class="row"> <div class="large-12 columns ui-widget"> <label for="tags">Input Label</label> <input id="tags" type="text" placeholder="large-12.columns"> </div> </div> </div>

I just don't like to include another .css file, which is an overhead on the page:

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

So, I have two questions:

  • Is there a way to use dropdown from Foundation or something else? It seems that dropdown is for topbar only, and its css is screwed outside of this particular use case.

  • What is the “standard” way to create a dropdown menu in Foundation? Please help with some example. Because I thought of it as a bunch of rows , or it could be a setup from dropdown

+7
javascript css jquery-ui zurb-foundation jquery-autocomplete
source share
2 answers

You can try adding the 'f-dropdown' class via jquery to:

  $('.ui-autocomplete').addClass('f-dropdown');

also installed on app.css o youystyle.css:

.ui-helper-hidden-accessible{display:none}

Hope this helps ... http://jsfiddle.net/vgarcias/WdncE/

+13
source share

The fund is currently trying to enable default autocomplete in its next version. You can find the entry in this

https://github.com/zurb/foundation/issues/3100

+4
source share

More articles:


All Articles