• Registered: 2011-02-17
  • Posts: 10

Topic: Changing rows and cols for text_fields attribute with CSS

Hello I was wondering if their was a way to set the rows and cols attribute of a text field with css?

I don't mean the size because the text will still only be one line. If there is not a way I tried it with the rails forum helper but it didn't change the field.

<%= f.text_field :content %>
and
<%= f.text_field :content, :rows => 15, :cols => 80 %>

results in the same size field

I guess what I am really asking is if any one knows how to use the forum helper to make large text fields for things like edit your profile or write a post actions.

  • Registered: 2011-02-17
  • Posts: 28

Re: Changing rows and cols for text_fields attribute with CSS

It is possible.

In CSS use

.comments { width: XXpx; height: YYpx; } //use desired XX and YY values

Change your view:

<%= f.text_field :content, :class => "comments" %>
  • Registered: 2011-02-17
  • Posts: 10

Re: Changing rows and cols for text_fields attribute with CSS

Thank you for the reply but like I said width and height will change the size of the box just fine. However the problem is that the courser will be centred vertically with unused white space above and bellow it. When you are making an input field for something like write your profile here or a description for an auction post it needs more than one line for the author to work with. After researching the subject I have realized that it is best to just exit the ruby rails <% %> momentarily and create your own text field and set the width and height options. CSS can't accomplish this yet as it has no control over rows and cols which are the attributes that need to be changed for a functional large input are and not just a seemingly large input field.

Unless I am missing something.

  • Registered: 2011-02-17
  • Posts: 10

Re: Changing rows and cols for text_fields attribute with CSS

Sorry I meant exit the <% %>
And set the rows and cols options not width and height wink

  • Registered: 2011-02-17
  • Posts: 28

Re: Changing rows and cols for text_fields attribute with CSS

Check this code

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Form</title>
      <style type="text/css">
        .comment {
          width: 1000px;
          height: 200px;
          font: 1em arial, sans-serif;
        }
      </style>
    </head>

    <body>
      <form>
        <textarea class="comment"></textarea>
      </form>
    </body>

</html>

As you can see changing width and height in CSS results in changing number of visible rows and cols for the textarea.comment.

You can do several things:
- check the html output of your application to find why you can't change those values,
- try this code

<%= f.text_field :content, :rows => "15", :cols => "80" %>

- or check the textarea in Firebug. It will show you all styles that change this element

  • Registered: 2011-06-06
  • Posts: 2

Re: Changing rows and cols for text_fields attribute with CSS

Hi friends..
.I really like this post..."Thank you for the reply but like I said width and height will change the size of the box just fine. However the problem is that the courser will be centred vertically with unused white space above and bellow it. When you are making an input field for something like write your profile here or a description for an auction post it needs more than one line for the author to work with".........Thanks.

regards....

sarika