bootstrap 3 - if you care help test trunk now

[Massimo Di Pierro]

Bootstrap 3 is in trunk now. Please help us test it.

Also help us test that existing apps are not broken.

Massimo

[Massimo Di Pierro]

also help us test the grid in trunk.

[eric cuver]

where i can find the web2py version with bootstrap

[Massimo Di Pierro]

https://github.com/web2py/web2py/archive/master.zip

note, you have to use formstyle. For auth forms this is now set by default in db.py.

form = SQLFORM(..., formstyle = SQLFORM.formstyles.bootstrap3)

grid = SQLFORM.grid(..., formstyle = SQLFORM.formstyles.bootstrap3)

grid = SQLFORM.smartgrid(..., formstyle = SQLFORM.formstyles.bootstrap3)

[Ricardo Pedroso]

On 8/10/14, Massimo Di Pierro <massimo....@gmail.com> wrote:
> https://github.com/web2py/web2py/archive/master.zip
>
> note, you have to use formstyle. For auth forms this is now set by default
> in db.py.
>
> form = SQLFORM(..., formstyle = SQLFORM.formstyles.bootstrap3)

I only test SQLFORM.
I don't like to see the col-lg-'s hardcoded in the bootstrap3 formstyle

I've attached a small app with two bootstrap3 formstyles.
One is for horizontal forms and the other is for vertical forms
It's more close to what I would like to have in web2py.

Just unzip in web2py/applications folder. It will create an app named "bs3"
Then:
http://localhost:8000/bs3

Ricardo

[Massimo Di Pierro]

Would you send me this as a patch? I too would prefer to default to NO col-lg-*

[Ricardo Pedroso]

I can make a patch in next friday/weekend, but you want a patch against what?

What I've attached was a simple app showing two bootstrap3 formstyle
alternatives.

Should I patch the formstyle_bootstrap3 in sqlhtml.py?

Ricardo

> --
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to web2py+un...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

[Miquel Fontanals]

Hi

I've found some issues testing an existing app

1.- Not bs3 related

db.define_table("parent", Field('name'), format='%(name)s')
db.define_table("child", Field('parent', 'reference parent'))

In current version when I create/edit the child using SQLFORM the field parent becomes a dropdown of parent names
In trunk the field parent is an input field (not select)

If I set this in trunk:

db.child.parent.requires=IS_IN_DB(db, db.parent.id, db.parent._format, zero=T('choose one'))

the dropdown is ok but after that if on some other controler/function I set db.child.parent.writable=False the field only shows the ID, not the name (well the format...)

2.- bootstrap3 and SQLFORM.grid
There is a problem when showing the hidden fields of search because the hidden class on bs3 uses !important...
bs3
.hidden {
    display: none !important;
    visibility: hidden !important;
}

My workaround here is override this class in my own css
.hidden {
    visibility: visible !important;
}

And adding/redefining this js function (found on so)
$.fn.show = function() {
                    this.attr("style", "display: block !important");
                    return show.call(this);
                };

The problem here is that some elements are display:inline and others are display:block and I don't know how to handle both...

Maybe is better to use jQuery(elem).removeClass('hidden').addClass('something')  than using jQuery.hide() / show()
Or another solution could be using a web2py custom class for the hidden elements used in grid (without the !important please...), so the jQuery.show() will work again

3.- formstyle bootstrap3 and date picker
The date fields don't have the css class date so the datepicker is not working.

I'm new to web2py and developing my first app with tag R-2.9.5 from github, but using bs3 (copied views and static folder from default app from trunk over my existing app, there is a migration path for existing apps?), and I'm checking out the master branch whenever there are new commits to keep testing, and waiting for the bs3 release :)

Oh, and I forget, I love it, thanks !!!

Miki
(learning web2py and english at the same time...)

El dissabte 9 d’agost de 2014 9:13:38 UTC+2, Massimo Di Pierro va escriure:

[Massimo Di Pierro]

Most of these issues have been addressed today. I could use some help with the style of Field(.., 'list:string') and Field(...,'boolean')

[Miquel Fontanals]

Hi Massimo,

Nice, now it works without any workarounds :)

However about point 1, when I set db.child.parent.writable=False :

-- bootstrap3_inline - the value misses the class .form-control-static  to vertical align the value with his label

-- bootstrap3_stacked - the html output is "<label>Label: </label>Value" but bs3 sets the label display to inline-block, so there is no whitespace between label and value when rendered in the browser. If I set the space after de label closing tag it's rendered as expected: "<label>Label:</label> Value"

I suspect that this happens for all writable=False elements (but not tested)

About the boolean / checkbox, nice to see the label after the checkbox but it have an ugly colon in it... checkbox label:
A newbe question: Is it possible to configure the colon visibility on field labels when using FORM/SQLFORM?

I don't have any list:string field in my model right now, if I need one or I've time I will test it :)

Miki

El divendres 22 d’agost de 2014 3:49:51 UTC+2, Massimo Di Pierro va escriure:

[Rob_McC]

Massimo:

I'm trying it out, and I like what I see so far.

The Welcome application HTML comments seem to through several validation errors.

http://127.0.0.1:8001/welcome/default/index

1.  Line 99, Column 26: Consecutive hyphens did not terminate a comment. -- is not permitted inside a comment, but e.g. - - is.

   <!--    central column --------------------------------------------------------…

   ✉

2.  Line 99, Column 26: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.

   <!--    central column --------------------------------------------------------…

Should that be fixed?

I'll continue to test it some more, thanks for upgrading to Boostrap 3.

Note: I like this site to experiment with Bootstrap 3
http://bootsnipp.com/

Cheers.

Rob

[Giacomo Dorigo]

Hi Massimo,

I was reading this page in the manual:

http://web2py.com/books/default/chapter/29/12/components-and-plugins#Layout-plugins

What do you think about putting the (presently) default bootstrap 2 layout in a plugin?

In this way you will ship directly web2py with these:

static/plugin_layout_default_bootstrap2/

views/plugin_layout_default_bootstrap2/layout.html

and having the bootstrap 2 layout "encapsulated" like this it will be easier for us to test new bootstrap 3 as a layout plugin in existing applications (instead of having to create new apps from trunk), and also will be easier later to ship web2py with both bootstrap 2 and bootstrap 3 implementations so that people can choose between them just by modifying views/layout.html as explained in the manual:

{{extend 'plugin_layout_name/layout.html'}}
{{include}}

PS

maybe you already did this, I didn't notice this post before so I didn't have time to download and test the master.zip yet.

[Richard]

Massimo,

I downloaded the master zip and try the following http://codepen.io/ncerminara/full/omChv/ in order to get a full width desktop app layout.
I tried the following but this was not successful:

<div class="container-fluid">
    <div class="row">
         <div class="col-xs-4"  style="margin-left: 5px;" id="env_panel">
          ......
         </div>
         <div class="col-xs-4"  style="margin-left: 5px;" id="env_panel">
          ......
         </div>
         <div class="col-xs-4"  style="margin-left: 5px;" id="env_panel">
          ......
         </div>
    </div>
</div>  


Should this be possible with the bs3 version?

Richard D

On Saturday, August 9, 2014 9:13:38 AM UTC+2, Massimo Di Pierro wrote:

[Joe Barnhart]

2nd Edit:

I see now my problem is probably related to revision 5891, the "refactored ANSI LIKE" patch.  I always expect LIKE to behave in a case-insensitive way but it now defaults to case sensitive.  This could be a big deal for folks with existing applications to support.

----------------

Edit:

Oops... The problem is with "startswith()".  It does not work the same as contains(str+'%').

-----------------

I think there may be a change in operation for "contains()" in the DAL.  

With the last release, I can use an empty string as an argument to contains, and it will return all values (i.e. the empty string matches all).  In the trunk version the empty string matches nothing.  I don't know which is more "correct" but it does mean I need to change my code in numerous places to accommodate the change in usage.

-- Joe

[Jim S]

Is there a way I can default all of my forms to bootstrap3_inline?

-Jim

[Leonel Câmara]

Officially not yet Jim. You can set response.formstyle but this may change so I wouldn't use it for now.

See discussion here:

https://groups.google.com/forum/#!topic/web2py-developers/43xNoDmB0rU

[Jim S]

Ok, for now I'll just hardcode it on my SQLFORM.grid calls.

Another issue I'm having is that some of my buttons look like they have overlayed images on them.  I've attached a sample.  The code that is getting generated looks like this:

<td class="row_buttons" nowrap="nowrap">
 <a class="button btn btn-default" href="/infocenter/user/index/edit/auth_user/3059?_signature=4fd3e76ccc3017c25f56e3ee3db00f834b683818">
 <span class="icon pen icon-pencil glyphicon glyphicon-arrow-pencil"></span>
 <span class="buttontext button" title="Edit">Edit</span>
 </a>
 <a id="230f96c0-8490-4147-a415-d268f9c7698a" class="button btn btn-default" href="/infocenter/user/index/delete/auth_user/3059?_signature=453319f27fb9445e1b0f76dcde5bdb1012b56b7f" data-w2p_remove="tr" data-w2p_method="POST" data-w2p_disable_with="default" data-w2p_confirm="default">
 <span class="icon trash icon-trash glyphicon glyphicon-trash"></span>
 <span class="buttontext button" title="Delete">Delete</span>
 </a>
</td>

Any ideas why those double images are showing on the delete button and nothing is showing on the edit button?

-Jim

[Jim S]

Also, if I remove the "icon trash icon-trash" from the class on the image span (on the delete button) the proper delete image shows up.

-Jim

[Leonel Câmara]

Yes that's not right jim, bootstrap3 should only have the version glyphicon and bootstrap2 shouldn't. What you should do is send your own ui dict to grid, something like this on your grid call

           ui = dict(widget='',

                      header='',

                      content='',

                      default='',

                      cornerall='',

                      cornertop='',

                      cornerbottom='',

                      button='btn btn-default button',

                      buttontext='buttontext button',

                      buttonadd='glyphicon glyphicon-plus',

                      buttonback='glyphicon glyphicon-arrow-left',

                      buttonexport='glyphicon glyphicon-download',

                      buttondelete='glyphicon glyphicon-trash',

                      buttonedit='glyphicon glyphicon-arrow-pencil',

                      buttontable='glyphicon glyphicon-arrow-right',

                      buttonview='glyphicon glyphicon-arrow-zoom-in',

                      )

[Jim Steil]

Thanks, that worked great.  

NOTE:

This line is incorrect:   buttonedit='glyphicon glyphicon-arrow-pencil',

Should be:  buttonedit='glyphicon glyphicon-pencil',

-Jim

--

Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---

You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/HWZ_4gyUSPo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.

[Gael Princivalle]

Hello all.

Do we know when the web2py Bootstrap 3 version will be released ?

Regards.

[Tom Øyvind Hogstad]

What is the status of bootstrap3 now.

It was reverted in trunc and I just started a project at that time. Started in bootstrap3, but I had not done much so I reverted to bootstrap2.

Now I would like to go back/forward to bootstrap3 again before my project gets any larger.

Tom Ø.

[Anthony]

You can use web2py with Bootstrap 3 (or any front end framework). It even has built-in formstyles and grid classes for Bootstrap 3 (though even without those, you can add your own custom formstyles and grid classes). Is there a particular problem you are having?

Anthony

[Tom Øyvind Hogstad]

No particular problem. More of a wondering what happened to this "project".

Since this is my first web2py project, never used Bootstrap, I also had almost zero knowledge of Python, never really used PostgreSQL and my VPSes have always been Centos, but I felt for Debian on my latest VPS. 200+ hours later I need to set aside some time to refactor stuff :-)

Selling in projects without being proficient in any of the tech you wan't to use, lead to loads of fun (And a bit on the low side considering "real" hourly rate) :-)

Mostly wan't to use BS3 trying to consolidate theming to BS3 for both Web2py and Drupal work.

Going for reworking my app to BS3.

Tom Ø.

[Anthony]

I think the relevant BS3 functionality is there. The only thing we don't have is a BS3 based scaffolding app, but if you're using a custom theme, the scaffolding app probably wouldn't help much anyway (and if you were just going to stick with a relatively unmodified scaffolding app, then it wouldn't much matter whether it were BS2 or BS3, as they would look the same).

Anthony

[Tom Øyvind Hogstad]

I think the standard bootstrap theme is perfect for business apps :-)

But I do use various components: navs, buttongroups, pills and so on. And the App/Site is very mobile friendly.

Not many files to modify anyway. 

Tom Ø.

kl. 15:33:20 UTC+1 mandag 24. november 2014 skrev Anthony følgende:

I think the relevant BS3 functionality is there. The only thing we don't have is a BS3 based scaffolding app, but if you're using a custom theme, the scaffolding app probably wouldn't help much anyway (and if you were just going to stick with a relatively unmodified scaffolding app, then it wouldn't much matter whether it were BS2 or BS3, as they would look the same).

Anthony

[Jim Steil]

For what it's worth, I have these modifications in my app to make Bootstrap 3 work with SQLFORM.grid:

In db.py:

def my_formstyle(form, fields):
    col_sm_label_size = 4
    col_md_label_size = 3
    form.add_class('form-horizontal col-sm-9 col-md-7 col-lg-5')
    label_col_class = "col-sm-%d col-md-%d" % (col_sm_label_size, col_md_label_size)
    col_class = "col-sm-%d col-md-%d" % ((12 - col_sm_label_size), (12 - col_md_label_size))
    offset_class = "col-sm-offset-%d col-md-offset-%s" % (col_sm_label_size, col_md_label_size)
    parent = CAT()
    for id, label, controls, help in fields:
        # wrappers
        _help = SPAN(help, _class='help-block')
        # embed _help into _controls
        _controls = DIV(controls, _help, _class=col_class)
        if isinstance(controls, INPUT):
            if controls['_type'] == 'submit':
                controls.add_class('btn btn-primary')
                _controls = DIV(controls, _class="%s %s" % (col_class, offset_class))
            if controls['_type'] == 'button':
                controls.add_class('btn btn-default')
            elif controls['_type'] == 'file':
                controls.add_class('input-file')
            elif controls['_type'] == 'text':
                controls.add_class('form-control')
            elif controls['_type'] == 'email':
                controls.add_class('form-control')
            elif controls['_type'] == 'password':
                controls.add_class('form-control')
            elif controls['_type'] == 'checkbox':
                label['_for'] = None
                label.insert(0, controls)
                _controls = DIV(DIV(label, _help, _class="checkbox"),
                            _class="%s %s" % (offset_class, col_class))
                label = ''
            elif isinstance(controls, SELECT):
                controls.add_class('form-control')
            elif isinstance(controls, TEXTAREA):
                controls.add_class('form-control')

        elif isinstance(controls, SPAN):
            _controls = P(controls.components, _class="form-control-static %s" % col_class)

        if isinstance(label, LABEL):
            label['_class'] = 'control-label %s' % label_col_class

        parent.append(DIV(label, _controls, _class='form-group', _id=id))
    return parent

grid_ui = dict(widget='',

               header='',
               content='',
               default='',
               cornerall='',
               cornertop='',
               cornerbottom='',
               button='btn btn-default button',
               buttontext='buttontext button',

               buttonadd='glyphicon glyphicon-plus space-after',
               buttonback='glyphicon glyphicon-arrow-left space-after',
               buttonexport='glyphicon glyphicon-download space-after',
               buttondelete='glyphicon glyphicon-trash space-after',
               buttonedit='glyphicon glyphicon-pencil space-after',
               buttontable='glyphicon glyphicon-arrow-right space-after',
               buttonview='glyphicon glyphicon-zoom-in space-after')

Then I pass along to my SQLFORM.grid calls like this:

In my controllers:

grid = SQLFORM.grid(query, fields=fields, orderby=orderby,
                    create=create, details=details,
                    editable=editable, deletable=deletable,
                    csv=False, search_widget=defaultSearch,
                    paginate=15, maxtextlength=45,
                    formstyle = my_formstyle, ui=grid_ui)

This works well with my site, you may need to tweak it to get your site looking nice.  By no means is this something that will work universally.

-Jim

On Mon, Nov 24, 2014 at 8:33 AM, Anthony <abas...@gmail.com> wrote:

I think the relevant BS3 functionality is there. The only thing we don't have is a BS3 based scaffolding app, but if you're using a custom theme, the scaffolding app probably wouldn't help much anyway.

Anthony

--

[Anthony]

Also, I don't know what version of web2py you are running, but the current version now includes Bootstrap 3 classes in the default "ui" dict for the grid, and there are now "bootstrap3_stacked" and "bootstrap3_inline" formstyles. Of course, you may still need to customize if these defaults aren't sufficient, but the same is true with Bootstrap 2 or any CSS theme.

Anthony

To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.

[Gael Princivalle]

Great job and thanks for sharing Jim.
I'll use it for my current project.

[Cynthia Butler]

@Jim S  Thank you for your post. I'd like to try it -- bootstrap 3 -- 

but I"m not sure which src files to link to in the layout.html file. 

For example, should I keep or delete the links to the web2py.css/.js/.ajax files?

I've already downloaded the bootstrap 3 files (.css , .js , /font files) and copied them into the static folder(s).

I've been researching all day but I still can't get it to work, I think I deleted the wrong links to the web2py src files.

Could you or someone post your bootstrap 3 layout.html file so I can see how to do it?

Thanks so much

Cindy

[pa...@cancamusa.net]

I also had overlay icons, in the auth navbar, as shown. To solve it I had to edit gluon/tools.py:1536

        def bootstrap3():  # Default web2py scaffolding
            def rename(icon): return icon.replace('icon','glyphicon')
            self.bar = UL(LI(Anr(I(_class=rename('icon '+items[0]['icon'])),
                                 ' ' + items[0]['name'],
                                 _href=items[0]['href'])),_class='dropdown-menu')

instead of

        def bootstrap3():  # Default web2py scaffolding
            def rename(icon): return icon+' '+icon.replace('icon','glyphicon')
            self.bar = UL(LI(Anr(I(_class=rename('icon '+items[0]['icon'])),
                                 ' ' + items[0]['name'],
                                 _href=items[0]['href'])),_class='dropdown-menu')

There sure are other ways...

[Jim Steil]

Attached is my layout.html...

[Cynthia Butler]

@Jim,
Thank you very much! Just what I needed to learn what I was doing wrong.
( I was deleting the web2py .css and .js files)


On Monday, December 15, 2014 6:48:51 AM UTC-7, Jim S wrote:

Attached is my layout.html...

[Dmitry Ermolaev]

how I can  include Layout Themes in admin/wizard/step1# ??

There is only Default ((

Plugins - also is empty (

воскресенье, 10 августа 2014 г., 6:30:06 UTC+4 пользователь Massimo Di Pierro написал:

https://github.com/web2py/web2py/archive/master.zip

note, you have to use formstyle. For auth forms this is now set by default in db.py.

form = SQLFORM(..., formstyle = SQLFORM.formstyles.bootstrap3)

grid = SQLFORM.grid(..., formstyle = SQLFORM.formstyles.bootstrap3)

grid = SQLFORM.smartgrid(..., formstyle = SQLFORM.formstyles.bootstrap3)

On Saturday, 9 August 2014 03:41:15 UTC-5, eric cuver wrote:

where i can find the web2py version with bootstrap

Le samedi 9 août 2014 09:17:28 UTC+2, Massimo Di Pierro a écrit :

also help us test the grid in trunk.