web2py autocomplete widget not “CSS-friendly”?

Question

In model:

db.define_table('mytable',
                 Field('auto'),
                 Field('manual')
                )
db.mytable.auto.widget=SQLFORM.widgets.autocomplete(request,db.mytable.auto)

In controller:

def index():
    form = SQLFORM(db.mytable)
    return locals()

Result: The field with autocomplete looks shitty like it doesn't get any CSS-styling, while the other field looks nice.

As descibed here I can do in the controller:

form.custom.widget['auto'][0].add_class('form-control')

Which makes the autocompleted field look nice, too.

But shouldn't it be normal behaviour for the autocomplete widget to provide the same CSS-friendly tags as other input fields? Or have I done something wrong?

Answer 1

The Bootstrap 3 formstyle function (which is the default formstyle in the web2py scaffolding application) does not properly style the autocomplete widget (this should be corrected).

As a workaround, if you want the styling to affect all forms generated from the DAL model, you can also do this:

autocomplete = SQLFORM.widgets.autocomplete
db.mytable.auto.widget = \
    lambda f, v: autocomplete(request, db.mytable.auto)(f, v, _class='form-control')

Or to make a specialized Bootstrap autocomplete widget for use with any field, you can do:

def bootstrap_autocomplete(*args, **kwargs):
    widget = SQLFORM.widgets.autocomplete(*args, **kwargs)
    return lambda f, v: widget(f, v, _class='form-control')

Then when defining a model, you can do:

db.mytable.auto.widget = bootstrap_autocomplete(request, db.mytable.auto)

UPDATE: The autocomplete widget has been fixed -- it now uses the styling specified by formstyle, as with other form widgets. So, the above workaround should no longer be needed.