customizing size of form fields created using field.custom.widget - forms

Question

I used the following code to generate a form in attached image.
Is it possible to change the size of the fields in the form.
I want to decrease size of input field of 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 the generates JS. You will find it follows a naming convention described in the book. You can use CSS to change the look-and feel of every widget.
input[name=estimate_time] { width:50px }
Similarly you can use JS/jQuery (I would recommend you do this in the 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'