Resizing the edit box

jfnoubel

Thanks for all this code and your intensive efforts to assist me in my learning curve vrijvlinder! So I applied exactly what you said and now I have a box with a vertical scroll bar when text becomes too long, which feels much better. Nevertheless, no resizable box like this one here, which really makes a difference. Any hint?

vrijvlinder

well it is not that essential in my opinion, I just made the box bigger to accommodate and it works fine. I prefer it to work well with what it has than to have that option and have problems using mobile devices.

jfnoubel

Well, as for the size of the box I still get the same size and I don't know where in the custom.css I can change it. I see you use height:400px in many places, and I don't know what it's for as my default input box doesn't seem to have anything that looks like 400x400px. Nevertheless I tried to change this value, but it doesn't affect anything. So far it seems that the only thing that changed was the vertical scroll. Any clue?

vrijvlinder

my crystal ball says: link me to get further assistance

422

http://ckeditor.com/demo#auto-grow

https://groups.google.com/forum/m/?fromgroups#!topic/cleditor/5GUTedC-efo

Or search google for autogrow

jfnoubel

Thank you 422. Well, it tells that it autogrows, and it speaks about ckeditor which, I guess, comes as the source for cleditor? But what should I do from this?

vrijvlinder: I love you crystal ball

422

Tbh i am struggling to understand your issue.

Is it just that text area does not auto expand as you type ? In which case you dont imply a height to the textarea nor set number of rows

Adding min-height as vjrlinder stated sets the onload height initially

jfnoubel

So where would you change these settings? Something in a custom.css? In the jquery.cleditor.css file? In the php file somewhere? I just want to have an autoresize edit box, which disappears when we install cleditor (see previous comments). Thanks!

peregrine

I jumped in - I and skipped all the discussion here .

remove this line from cleditor default.php and see if it works correctly.

$Sender->RemoveJsFile('jquery.autogrow.js');

and work form there.

jfnoubel

Hi peregrine. Thanks for this one. I tried it before opening this discussion. Didn't work.

vrijvlinder

How about

$Sender->AddJsFile('jquery.autogrow.js');

peregrine

If you haven't been successful changing height.

try this change in default.php in cleditor plugin around line 100
from

ed = jQuery(this).cleditor({width:"100%", height:"100%"})[0];   

to

ed = jQuery(this).cleditor({width:"100%", height:"400px"})[0];

it will make the box bigger. As far as autogrow, something to figure out.

peregrine

Alternatively, to put autogrow in (it was hidden by scroll bar.).
try this change in default.php in cleditor plugin around line 100

from

ed = jQuery(this).cleditor({width:"100%", height:"100%"})[0];

to

ed = jQuery(this).cleditor({width:"90%", height:"100%" scrolling="no"})[0];

jfnoubel

peregrine: thank you for these proposals. So here's the status:

1. Changing to
   ed = jQuery(this).cleditor({width:"100%", height:"400px"})[0];
   did work. I do get more height by putting absolute values like 400px, and the scroll appears. Still no autosize.

2. Changing to
   ed = jQuery(this).cleditor({width:"90%", height:"100%" scrolling="no"})[0];
   restores the autosize, but the text edit bar disappears.

In both cases I removed the custom.css file which doesn't seem to influence at this point. It seems that we are more in the php stuff at this point, but of course I may be wrong.

vrijflinder: you suggest
$Sender->AddJsFile('jquery.autogrow.js');
but where should it go?

Thank you again for your inputs and proposal, it makes me more knowledgeable on all this stuff, no matter the outcome!

vrijvlinder

In the cleditor default php where you removed the other one which said removeJsFile.

peregrine

@jfnoubel said:
peregrine: thank you for these proposals. So here's the status:

1. Changing to
   ed = jQuery(this).cleditor({width:"100%", height:"400px"})[0];
   did work. I do get more height by putting absolute values like 400px, and the scroll appears. Still no autosize.

2. Changing to
   ed = jQuery(this).cleditor({width:"90%", height:"100%" scrolling="no"})[0];
   restores the autosize, but the text edit bar disappears.

In both cases I removed the custom.css file which doesn't seem to influence at this point. It seems that we are more in the php stuff at this point, but of course I may be wrong.

Yea I think you are slightly wrong regarding php - it is the js, attributes, live queries, etc.

vrijflinder: you suggest
$Sender->AddJsFile('jquery.autogrow.js');
but where should it go?

You could put below the statement where it is removed. .

or

If you comment the statement

// $Sender->RemoveJsFile('jquery.autogrow.js');

the autogrow is loaded. The problem is the cleditor positions itself over it.

So in a nutshell - it was removed for a reason. Also, the cleditor is discouraged, because it has more bugs than you have found.

I'm stopping here, since you wanted a bigger box and now you have one. and form other threads you know your other options. Get kaspers plugin to work with 2.0.18.4 or upgrade to v 2.1

Thank you again for your inputs and proposal, it makes me more knowledgeable on all this stuff, no matter the outcome!

jfnoubel

Ah ok. So I did it, but it doesn't seem to affect anything. I guess KevinHamilton could really help here.

peregrine

@jfnoubel said:
Ah ok. So I did it, but it doesn't seem to affect anything. I guess KevinHamilton could really help here.

exactly - you will see it is autogrow is now loaded when you comment it out removejs .
you will see it is autogrow is now loaded (check it in firebug) - just being overridden so to speak

or if you want to play you could could try the resizeable
http://jqueryui.com/resizable/

upgrade your ui.

But I would recommend doing it on a test site/

vrijvlinder

I like the cleditor

I guess KevinHamilton could really help here.

KevinHamilton: yes, this would take quite some programming skills that I don't have, and it seems there are simpler solutions.

The simple solutions don't seem to be working? ready for some hard coding? , just wait a bit and 2.1 will be out meantime get to know this one, warts and all.

peregrine

the reason why autogrow comes back with this - is because it breaks cleditor and disregard
this statement - it is a wild goose chase.
ed = jQuery(this).cleditor({width:"90%", height:"100%" scrolling="no"})[0];