Customize the size of form fields created with field.custom.widget

Question

I used the following code to create a form in an attached image. Is it possible to change the size of the fields in the form. I want to reduce the size of the input field in Estimated time and the Dropbox field to the right of it

{{=form.custom.begin}} <table> <table><tr> <td><b>Type :</b></td><td><div>{{=form.custom.widget.type}}</div></td> </tr><tr> <td><b>Title :</b></td><td><div>{{=form.custom.widget.title}}</div></td> </tr><tr> <td><b>Description :</b></td><td><div>{{=form.custom.widget.description}}</div></td> </tr><tr> <td><b>Estimated Time :</b></td><div'><td>{{=form.custom.widget.estimated_time}}{{=form.custom.widget.estimated_time_unit}}</td> </div> </tr> <tr> <td></td><td><div align='center'>{{=form.custom.submit}}</div></td> </tr> </table> {{=form.custom.end}} 

Answer 1

Yes. You can and there are many ways.

The recommended way is to look at JS generation. You will find this according to the naming convention described in the book. You can use CSS to change the appearance of each widget.

 input[name=estimate_time] { width:50px } 

Similarly, you can use JS / jQuery (I would recommend that you do this in a view).

 jQuery(document).ready(function(){ jQuery('input[name=estimate_time]').css('width','50px');}); 

You can also use jQuery-like syntax in python in the controller:

 form.element('input[name=estimate_time]')['_style']='width:50px'