Bootstrap and custom forms and widgets

Showing 1-15 of 15 messages
Bootstrap and custom forms and widgets Matt 5/12/12 8:35 PM
Hi Everybody,

I'm using bootstrap for a project with web2py.

I want to create forms that mirror the standard approach taken by the bootstrap framework.

They wrap each "control" like so:

  <div class="control-group error">
        <label class="control-label" for="inputError">Input with error</label>
        <div class="controls">
          <input type="text" id="inputError">
          <span class="help-inline">Please correct the error</span>
          <p class="help-block">A comment for the field goes here.</p>
        </div>
      </div>

Since this is custom code I using form.custom and form.fields for output the HTML myself.

One small problem I've run up against in that when I do the following:

{{= form.custom.widget.full_name }}

If there is a form _error_ the following is output:

<input class="invalidinput" id="xyz_full_name" name="full_name" type="text" value="">
<div class="error" id="full_name__error">please enter their full name</div>

Is there anyway to suppress the div or change it so that it can become

<span class="help-inline">please enter their full name</span>

Instead?

Any help or suggestion for this would be greatly appreciated.

Thanks in advance,
Matt

Re: Bootstrap and custom forms and widgets Anthony 5/12/12 8:53 PM
http://web2py.com/books/default/chapter/29/7#Hide-errors

Anthony
Re: Bootstrap and custom forms and widgets Matt 5/12/12 11:29 PM
Brilliant thanks for that.

Matt
Re: Bootstrap and custom forms and widgets Pystar 5/19/12 2:10 AM
Hi matt,
I have been working extensively with bootstrap with web2py and I can say the approach you are taking is the best way. 

This is my solution

#########controller####################3

form = SQLFORM(db.blahblah)
if form.accepts(request, session, hideerrror=True):
    blahblah

the hideerror=True is what does the magic.
It prevents your forms from displaying the error messages in the default position which is below the form field.

In your views, you can now display your error messages by doing

<span class="help-inline">{{=form.errors["post"]}}</span>

make sure you put the above in a conditional IF, ElSE block or else the errors will be displayed whether you have errors in your form or not
Re: Bootstrap and custom forms and widgets Niphlod 5/19/12 9:48 AM
me too, but in a different way.

I'm working on an app and waiting for web2py 2.0 to release it to the public.
It contains a function able to serialize form in "bootstrap" styles (i.e. form-horizontal, form-vertical, form-inline) ....
With some additional work maybe that could be included to provide more than the current 'table3cols', 'table2cols', 'divs', 'ul' styles of the forms.

Right now it's called into the view, i.e.:

{{=twitter_form(form, 'form-vertical')}}

Il giorno sabato 19 maggio 2012 11:10:30 UTC+2, Pystar ha scritto:
Re: Bootstrap and custom forms and widgets Alec Taylor 9/3/12 8:03 PM
Hi Niphlod,

Now that web2py 2 has been released, could you release the code for your form manipulation?

Thanks a heap,

Alec taylor
Re: Bootstrap and custom forms and widgets Niphlod 9/4/12 12:45 AM
the code is out there on github.com/niphlod/w2p_tvseries, but included in web2py 2.0.6 there is other code for bootstrap-compatible forms

Il giorno martedì 4 settembre 2012 05:03:59 UTC+2, Alec Taylor ha scritto:
Re: [web2py] Re: Bootstrap and custom forms and widgets Alec Taylor 9/4/12 1:34 AM
Thanks, but I can't seem to find anything in the release about how to use bootstrap with forms:  https://groups.google.com/forum/#!topic/web2py/0Uk5b34LUsc 

(Note that I'm using crud.create and crud.update)

--
 
 
 

Re: [web2py] Re: Bootstrap and custom forms and widgets Niphlod 9/4/12 2:31 AM
should be formstyle='bootstrap', the same way you use formstyle=divs , ul, etc

Il giorno martedì 4 settembre 2012 10:34:07 UTC+2, Alec Taylor ha scritto:
Re: [web2py] Re: Bootstrap and custom forms and widgets Alec Taylor 9/4/12 2:36 AM
Unfortunately that didn't work:

<type 'exceptions.TypeError'> create() got an unexpected keyword argument 'formstyle'

<type 'exceptions.TypeError'> update() got an unexpected keyword argument 'formstyle'



--
 
 
 

Re: [web2py] Re: Bootstrap and custom forms and widgets Anthony 9/4/12 4:49 AM
For Crud, it's a setting:
 
crud.settings.formstyle = 'bootstrap'

Anthony
Re: [web2py] Re: Bootstrap and custom forms and widgets Anthony 9/4/12 6:09 AM
Also, you can now create your own formstyle function, which should take the form object and a list of field tuples (each field tuple includes the id, label, controls, and comment for the field) and return the DOM you want displayed in the form (i.e., the part that goes inside <form></form>). Internally, this is how all the formstyles now work (each has its own function). To see how they work, check out the code: http://code.google.com/p/web2py/source/browse/gluon/sqlhtml.py#651.

Anthony
Re: [web2py] Re: Bootstrap and custom forms and widgets Alec Taylor 9/4/12 10:18 AM
Thanks, in that case I think I've found a bug in that formstyle setting.

Around my submit button it has drawn a white rectangle; I've been able to extract it into a test-case:  http://jsfiddle.net/AlecTaylor/7whPt/ 

--
 
 
 

Re: [web2py] Re: Bootstrap and custom forms and widgets Anthony 9/4/12 10:58 AM
I don't think it's a bug. The submit button is in a div with class "form-actions", and bootstrap.css defines the background color of that class as whiteSmoke. You can override that with your own CSS rule for the "form-actions" class.

Anthony
Re: [web2py] Re: Bootstrap and custom forms and widgets Alec Taylor 9/5/12 12:58 AM
Thanks, set it to this and it's now working:

.form-actions {
    background-color#d9edf7;
    border-top0;
    padding0;
} 

--