fields size bug with bootstrap?

[André Kablu]

Hi all,

I don`t know if it is a bug, anyway wanted to post to developers list to get this response.

If you use last version of web2py, there is a code on web2py.css line 33 that put a fixed value to field size.

input[type="text"], input[type="password"], select {
    margin-right: 5px;
    width: 300px;
}

So even if you put a different class or try to set _size to a field, it will not change the field size.

<input id="test" class="input-small" type="text" value="" name="test">
or
<input id="test" size="100" type="text" value="" name="test">
in any view, will not change field size.

even if you do this:
   form.element('input',_name='test')['_class']='input-small'
or
   form.element('input',_name='test')['_size']=100
will not change field size.

can anyone confirm if this is happening or if it is only with me?

[Anthony]

I think the problem is that input[type="text"] in web2py.css is of the form element.class ([type="text"] is a pseudo-class), whereas .input-small in bootstrap.min.css is just of the form .class. According to CSS order of precedence rules, element.class has greater specificity than just .class, so the input[type="text"] rule takes precedence (and I think all CSS rules trump the "size" attribute of the input element). I think maybe we can change the web2py.css rule as follows:

[type="text"], [type="password"], select {
    margin-right: 5px;
    width: 300px;
}

In that case, the .input-small class in bootstrap.min.css should have equal specificity to the above web2py.css rule (i.e., both represent just a class without an element), so as long as bootstrap.min.css is loaded after web2py.css (which is the case in the default layout.html), then the .input-small rule will take precedence.

Thoughts? Have I missed something?

Anthony

[André Kablu]

Thanks!

This works fine for defining another class like:

<input id="test" class="input-small" type="text" value="" name="test">

But not for defining size manually like:
<input id="test" size="30" type="text" value="" name="test">