change the size of a text field in a form

[Marco Prosperi]

hello, how can I change the default size of a 'text' field in a form? (at first appearance, not dragging the corner)

thanks

Marco

[Anthony]

You can do it via CSS:

textarea {width: 400px;}

Anthony

[Pystar]

I would suggest you using custom forms in your view and targeting the attribute you wish to change with CSS. I find that approach more flexible.

In the view:

{{=form.custom.begin}}

###you can include normal HTML here to build up the form elements and target it with CSS

or

<textarea id=#, class=# rows=20, cols=30></textarea>

{{=form.custom.end}}

hope that helps?

[Ron Chatterjee]

Add this to your view:

<script>$('textarea').css('width','1320px').css('height','70px');</script>

Should change the size.

[Richard Vézina]

And why not :

<style>

textarea {

    width: 1320px;

    height: 70px;

}

</style>

You don't need js for that...

Also consider make your textarea elastic there is js plugins for that...

:)

Richard

--
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.

[Ron Chatterjee]

Only one thing to be careful of. I believe...If someone use the default scaffolding css and create the form its responsive by default. Means, you open the browser and roll back and see the form shrinks with you. Which is pretty good in a sense that no one needs to have a tablet version or mobile. But with an external css/js, that feature may be lost unless its part of the bootstrap.

[Richard Vézina]

Don't know if there is anything include in bootstrap now for elastic textarea (I doubt)... Regarding responsiveness, I don't think simple size change from css override will bring any issue, except it it lead to the overriding of the responsive behavior of course.

Richard

[Ron Chatterjee]

Based on what I have seen, If we have a table consist of both text and string...text will remain same (based on external css rules) and string will shrink. Unless all of them are changed equally using the external css. But I agree with you Richard, there are no elastic text area. the bootstrap is responsive as a default.

<script>$('textarea').css('width','20%').css('height','70px');</script>

<style>#header2 {

    background-color:skyblue;

    color:white;

    text-align:left;

    padding: 0.1%;

    width: 15%;

    height: 4%;

}</style>

Its better to define the width as a % as it will shrink the page based on % defined in the css rules. Then its responsive all the way and always will even with external css.

[Steven Vannoy]

This is exactly what I'm trying to do, none of the suggestions below has changed my form view at all. Must be doing something wrong. I'm trying to avoid using a custom.widget so I don't have to specifically layout everyone of my fields, there are over 30, but I want them to be a fixed width so when the field is displayed, I can also have it be a fixed width and the person entering text will know how wide the viewable area is.

[Richard Vézina]

F5 or Ctrl+R or delete cache may help sometimes... But it hards to know what you may doing wrong without any code...

Richard

--

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+unsubscribe@googlegroups.com.

[Maurice Waka]

I had the same problem and changed but noted that the button 'submit' disappears.....any help on how to sort this hout