serby/ctrl

More form styles are needed to set the size of textareas

Closed this issue · 16 comments

Sometimes you need to say that a textarea is: shortest, short, tall, tallest or smallest, small, big, bigest. I have been added these styles on projects that need them, but it would be good to have a more considered set of modifiers in control.

Also we need to be able to have a textarea that takes the full width of a form. It would be good if this was the default when a textarea is not in a .form-row.

/cc @bengourley

Article body is an example of a place we need this: http://localhost:3021/admin/article/new

I'm currently rewriting some standard form element markup and styling in a private repo (@serby you have access) which will be open-sourced after a bit more work.

I'll be sure to take this into account, then the ctrl forms will likely be refactored to use the new structure. Is this issue something which can wait a while, or would you like a temporary fix for now?

How do you get a not full width one currently?

Sent from my iPhone

On 14 Oct 2012, at 09:39, Paul Serby notifications@github.com wrote:

Article body is an example of a place we need this: http://localhost:3021/admin/article/new


Reply to this email directly or view it on GitHub.

It can wait for now, I know you are busy.

I've put in place a temporary fix in my last commit 2dc3bfb

@bengourley See the article create page now for an example of what I was after.

Sure, but there is currently no 'textarea' property type in the view schema. There should be. The custom article admin form is very WET.

There is a textbox in the generic form on line 51 of form.jade

I don't have a massive problem with some duplication in view templates. The
alternative is to add complexity to the generic logic to handle more
concevable UI possibility which would be worst than a bit of copy and paste
in the view layer.

On 14 October 2012 21:07, Ben Gourley notifications@github.com wrote:

Sure, but there is currently no 'textarea' property type in the view
schema. There should be. The custom article admin form is very WET.


Reply to this email directly or view it on GitHubhttps://github.com//issues/70#issuecomment-9425343.

paul.serby@clock.co.uk
Chief Technology Officer

Direct: +44 2030 516115__Mobile: +44 7881 550999
*

*

Ah I couldn't find that before. Thanks.

I think we should have the most common form controls in generic, though. It can be really powerful to have them, and as we've experienced, developers like to use them as they are a quick win.

Agreed. Maybe there needs to be a class that makes them full width.

On 15 October 2012 12:17, Ben Gourley notifications@github.com wrote:

Ah I couldn't find that before. Thanks.

I think we should have the most common form controls in generic, though.
It can be really powerful to have them, and as we've experienced,
developers like to use them as they are a quick win.


Reply to this email directly or view it on GitHubhttps://github.com//issues/70#issuecomment-9441625.

paul.serby@clock.co.uk
Chief Technology Officer

Direct: +44 2030 516115__Mobile: +44 7881 550999
*

*

@jackbrewer Does #131 address this?

Yes, if you are happy with passing the textarea mixin a 'rows' attribute rather than passing a class - I've implemented this.

It's more flexible as you can have bespoke heights per textarea and don't need to remember a group of class names

And there is now a class of .form-row-full-width to make form elements drop below their labels and span the full width of the form.

Currently this has only been tested with textareas, which is really the only place it's needed for now. A full suite of full-width form elements is in the works but enough work has been done to close this issue.

What about classes for height?

That's what the optional 'rows' attribute is doing that I mentioned before.

For a height of 25 lines of text:
mixin textboxFieldForObject( { ... }, { ... label: 'Article Content', rows: 25 ... })

This also means the textarea height is always a multiple of the line-height, so text on the last line shouldn't get cut off.

We can do classes if you like, but this gives more flexibility and means less CSS.

Sorry I missed your first comment about rows. Sounds good, I'll have to give it go.