Adjusting the width of the textarea

[Johann Spies]

I want to change the width of certain input fields for the type 'text'  in a form. 

I have tried this but it did not have any effect:

 <style type="text/css">
      textarea {
                                  width: 100px; 
                                 }
</style> 

The defined width in base.css  is 400px.

So how do I do it if this is not working?

Johann

--
 May grace and peace be yours in abundance through the full knowledge of God and of Jesus our Lord!  His divine power has given us everything we need for life and godliness through the full knowledge of the one who called us by his own glory and excellence.
                                                    2 Pet. 1:2b,3a

[contatog...@gmail.com]

Become to me too.
_____________________________________________
Gilson Filho

Web Developer
http://gilsondev.com

2011/3/11 Johann Spies <johann...@gmail.com>

[contatog...@gmail.com]

Sorry, Happens to me too

[Martín Mulone]

Fijate que no tengas en layout.html esta linea o algo por el estilo alguna vez la vi.

<script>jQuery(document).ready(function(){jQuery('textarea').css('width','600px').css('height','400px')});</script>

también fijate en base.css

por esto:

input[type=text], input[type=password], textarea, select {

2011/3/11 contatog...@gmail.com <contatog...@gmail.com>

--

Pablo Martín Mulone (mar...@tecnodoc.com.ar)

http://www.tecnodoc.com.ar/

My blog: http://martin.tecnodoc.com.ar
Expert4Solution Profile: http://www.experts4solutions.com/e4s/default/expert/6

[Johann Spies]

On 11 March 2011 15:32, Martín Mulone <mulone...@gmail.com> wrote:

Fijate que no tengas en layout.html esta linea o algo por el estilo alguna vez la vi.

<script>jQuery(document).ready(function(){jQuery('textarea').css('width','600px').css('height','400px')});</script>

You are a star!  Thanks.  Now I also learning how to use jQuery for this type of thing.

Regards

[Bruno Rocha]

Use the !important[0]

 <style type="text/css">
      textarea {
        width: 100px !important;  
     }
</style>  

[0] http://www.webcredible.co.uk/user-friendly-resources/web-dev/css-important.shtml

--

Bruno Rocha

[ About me: http://zerp.ly/rochacbruno ]

2011/3/11 Johann Spies <johann...@gmail.com>

[Jonathan Lundell]

On Mar 11, 2011, at 6:24 AM, Bruno Rocha wrote:

Use the !important[0]

 <style type="text/css">
      textarea {
        width: 100px !important;  
     }
</style>  

[0] http://www.webcredible.co.uk/user-friendly-resources/web-dev/css-important.shtml

Generally speaking, you should be able to do this kind of thing in css without resorting to JavaScript. When a css override fails, it's often because of a syntax error (so the new spec gets silently ignored), or because an override needs to be more specific (or later in the flow) than the default value.

!important moves a spec to the top of the priority list.

[davedigerati]

I'm bumping up against this on a form as well, and puzzled why using a custom/clean css sheet loaded last in the page header for precedence, with unique divs/classes aren't working on the textareas... not for size, background-color, text color, nothing.  I can target the row, the parent divs, etc, but not the textareas themselves.

Is the jquery overwriting/hard-coding style properties?  I am using jqueryui but still would expect specificity to work.

I really want to find a css solution...???

[Jim Gregory]

Don't know if this applies in your situation, but one problem I've encountered is I always assumed that simply adding a response.files. append (page.css) to the top of a view before extending the default layout.html template would put the page.css file last in the hierarchy. If you look at the code, it doesn't. It puts it first.

In fact, I have yet to find a method of appending a custom css file to the hierarchy without changing the layout template explicitly to change the default loading order. Am I missing something?

[David Gawlowski]

Lol, yeah I had problems too and ended up hard-coding my css link into the layout right before the head closed.  But something else is going on with those inputs to prevent styling them...

On Aug 3, 2013 4:51 AM, "Jim Gregory" <bikes...@gmail.com> wrote:

Don't know if this applies in your situation, but one problem I've encountered is I always assumed that simply adding a response.files. append (page.css) to the top of a view before extending the default layout.html template would put the page.css file last in the hierarchy. If you look at the code, it doesn't. It puts it first.

In fact, I have yet to find a method of appending a custom css file to the hierarchy without changing the layout template explicitly to change the default loading order. Am I missing something?

--

---
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/ut7UKRyjepw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Anthony]

Is this in the basic scaffolding app, or are you using custom CSS/JS? If that latter, it's hard to say without seeing any code. In the scaffolding app, the textarea width is set in bootstrap-responsive.min.css and should be overrideable.

Anthony

[davedigerati]

Yes basic scaffolding, it's been left intact.  Agreed it *should* be overrideable.  I tested on another page where I was not using jquery and same, could not change the color of a textarea or text input box.

After much experimentation (and vaguely remembered reading somewhere but couldn't tell you where) that the only way to style the text box was through calling its id, such as below

<input id="sqrcell" class="1" type="text" value="dfdfdfdf">

which sucks because now styling becomes a per-id effort instead of per class of object as css intends and excels at <sigh>

I have a workaround now, just not a solution, so will monitor thread in hopes someone can share the correct css specificity for this- thx

[Paolo Caruccio]

@davedigearati

Could you post css rules that you are trying to apply as well as the html skeleton of the form and give more details about your SO, browser(s) and web2py version?

I wasn't able to replicate the issue on windows8, IE10, CH27, web2py last trunk.

[davedigerati]

Actually, it is also set in the web2py_bootstrap.css line 105, which is interesting, but not nearly as interesting as the comment ;)

/* because web2py handles this via js */

textarea { width:90%}

soooooo, who knows the javascript well enough to say what is happening here, and how we can regain overrideablility (lol that word is getting worse by the post)

On Saturday, August 3, 2013 9:57:34 AM UTC-4, Anthony wrote:

[Paolo Caruccio]

I think that the comment is wrong. Actually, the textarea width is not handled by web2py via js. Modern browsers, except IE, have a textarea resizable and so its width is calculated by browser itself. In this case in order to set a fixed width on all textareas you should set in your custom css

textarea {resize:none;}

Therefore, imho, your issue is due to other. If you post the interested code (html + css) we may help you.

 

Il giorno domenica 4 agosto 2013 06:50:45 UTC+2, davedigerati ha scritto:

Actually, it is also set in the web2py_bootstrap.css line 105, which is interesting, but not nearly as interesting as the comment ;)

/* because web2py handles this via js */

textarea { width:90%}

soooooo, who knows the javascript well enough to say what is happening here, and how we can regain overrideablility (lol that word is getting worse by the post)

On Saturday, August 3, 2013 9:57:34 AM UTC-4, Anthony wrote:

[Anthony]

Can you use the browser developer tools to inspect the element and see which CSS rule is active and where it comes from? Also, try disabling Javascript and see if that affects the display. If all else fails, pack a basic app that demonstrates the problem and attach it here.

Anthony

On Sunday, August 4, 2013 12:50:45 AM UTC-4, davedigerati wrote:

Actually, it is also set in the web2py_bootstrap.css line 105, which is interesting, but not nearly as interesting as the comment ;)

/* because web2py handles this via js */

textarea { width:90%}

soooooo, who knows the javascript well enough to say what is happening here, and how we can regain overrideablility (lol that word is getting worse by the post)

On Saturday, August 3, 2013 9:57:34 AM UTC-4, Anthony wrote:

[Anthony]

This has now been changed: https://code.google.com/p/web2py/source/detail?r=fb06ea622be62acbcd9218457d3b3863b93787d7. Custom CSS and JS files are now included after the standard scaffolding files, so you can easily override default CSS rules.

Anthony