Resizing the edit box

jfnoubel

Hi,

I am new in Vanilla forum and I may have missed a very obvious feature. My question is: how can I resize the edit post? I find the default size quite small for typing long texts (using Mark O'Sullivan default theme) and it has no lower right corner that makes the text box resizable like in this present post. Is this an option? Can it be configured somewhere? Does it come with the theme?

Thanks in advance.

PS: I didn't find a discussion about this, sorry if I missed it

kirkpa31

I believe you can create a new file within your /themes/default/design folder and just call it design.css

Within this file you can edit the size of the body. Something like:

#Body { width: 680px; text-align: left; margin: 50px auto 55px; }

Also, you may want to tweak /applications/dashboard/design/style.css right near the top where it says #Content and make the width whatever you want.

Please, someone correct me if this is wrong but this is how I altered the size of the body and content on my page @Vrijvlinder (CSS specialist)

422

custom.css

kirkpa31

ah woops. That is what I meant. Thank you @422

vrijvlinder

@jfnoubel what you want is the comment/message/editor form to be larger ?

#DiscussionForm textarea {
width: 100%;
height: 400px;
overflow:auto;
min-height: 300px;
margin: 0 0 6px;
}

you would change this code in the custom.css from your theme. forum/themes/yourtheme/custom.css

jfnoubel

Thank you everyone. Well, I still feel stuck here. What I really want is an edit box exactly like the one we have in this forum. Its size grows along the quantity of typed text, and it is resizable (at least on my mac) by dragging and dropping the lower left corner.

kirkpa31, vrivlinder, I haven't found any custom.css file in any of the folders you mention. I use default theme in vanilla 2.

Am I missing something?

All the best

kirkpa31

You have to create the custom.css file and add the code that vrijvlinder posted above, as an example. Your theme will automatically pick it up.

vrijvlinder

You need to create a custom.css file and put it in the default theme folder , that is where you will be editing the css code .

I know what you mean about being able to make the input box any size by dragging the lower right hand corner. That still works in the default input form it does not when using cleditor all you can do is adjust the width and height and if you want scroll bars or not. You maybe able to use overflow:hidden instead of overflow:auto to get the same effect.. Need to know what plugins you are using . Is it cleditor ?

KevinHamilton

See also, the CSS resize property. Not supported in IE or Opera.

I believe the automatic growing that you are looking for is provided by the jQuery autogrow plugin. This would take some programming skill to graft onto whatever your current commenting interface is.

vrijvlinder

Maybe this is the function you speak of?

https://gist.github.com/jlong/2127634

KevinHamilton

It might work similarly, but that is actually a different one than what is used here on this forum. The one I linked to is the actual plugin that is used on this comment box that I am currently typing into.

jfnoubel

vrijvlinder: you totally nailed it! I do use CLEditor jQuery WYSIWYG and this is what kills the resize box capacity. If I deactivate it, then I get a resizable box again. I just saw in the plugin page that they announced they removed the autogrow function due to some bugs. I guess I have to give up this plugin (just wrote them to ask).

Are you aware of any other good and safe WYSIWYG editor that doesn't take away the autogrow?

vrijvlinder & kikpa31: thanks for the advice on creating a custom.css. I am going to try right away to see if it changes anything.

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

Thanks again for your lovely support. Feels like a real community

vrijvlinder

you could try http://vanillaforums.org/addon/wysihtml5-plugin

I think the problem with autogrow is that it is not compatible with mobile devices. It would cause unwanted behavior on them making the plugin not mobile friendly.

jfnoubel

I looked at it but it needs Vanilla >= 2.1. I have the current downloadable version Version 2.0.18.4. Tried TinyMCE, but it provokes the same limitations and offers a poorer edit interface.

jfnoubel

ok, so I added the custom.css file you suggested in /vanilla/themes/default but it doesn't seem to alter anything when CLEditor is activated. Oh, and I use Google Chrome, but of course whatever choice should work on any conventional browser. Other suggestions?

KevinHamilton

@jfnoubel - did you already try this: http://vanillaforums.org/discussion/19719/resizing-of-frame-in-cleditor ??

jfnoubel

yes I looked into it and this is taking me too far for my understanding. The explanation given by the author of this hack require some prerequisite understanding on js, which I don't have right now. I could get into it but it would require much work on my side which I am not willing to give. Either there is a simple solution, or I will just give it up. Thank you so far KevinHamilton!

vrijvlinder

Ok here is how you can style the cleditor, copy that css code in that discussion and paste it into the new custom.css you created.

The cleditor as most rich text editors has two sides, the rich text and the code side. To style the code side, the selector (code) I posted above here will do it. To style cleditor main text area use the code in the discussion here, pick the relevant parts you need or use the whole thing. You can also edit it in the jquery.cleditor.min.js , but the css should do it unless you want to change the font of the main text area of the cleditor then it must be done in the js file.

http://vanillaforums.org/discussion/21846/how-to-style-cleditor-anyway-you-want#latest

Either there is a simple solution, or I will just give it up.

It is all rather simple it only looks complex. Once you start messing around with it you become familiar.Don't be afraid to break it that is how we learn without reading the manual lol

Oh and don't forget to clear the cache if you don't see changes right away wait or use some browser extension that reloads the stylesheets so you can see the changes right away.

jfnoubel

Oopps, sorry vrijvlinder, I think I turn even more confused here, as lists of code seem to pile up, and there's some language I may not get.

Here's what I did...

I installed the custom.css in /vanilla/themes/default/ with what you gave me:

#DiscussionForm textarea { width: 100%; height: 400px; overflow:auto; min-height: 300px; margin: 0 0 6px; }

But so far it doesn't affect anything.

Then I played with the file jquery.cleditor.css in /vanilla/plugins/cleditor/design/ by making a change in line 3:

.cleditorMain textarea {border:none; margin:0; padding:0; overflow-y:scroll; font:10pt Arial,Verdana; resize:both; outline:none;

where I changed resize:none; into resize:both.

But again, no changes. I guess I still miss something...

jfnoubel

and... I cleared the cache of course.
No matter you do on the .cleditorMain line, such as playing with overflow-y or resize, nothing happens. Seems there's something that supersedes whatever is done on this line.

vrijvlinder

these affect the textarea size. If something won't respond , add !important to it. You must add the size...paste this in the custom.css it has priority over other style sheets.

#DiscussionForm textarea{
width:400px!important;height:400px!important;
}
.cleditorMain iframe {
border:none; margin:0;
 padding:0;
width:400px!important;
height:400px!important;
}
.cleditorMain textarea {
border:none;
 margin:0; 
padding:0; 
overflow-y:scroll;
 font:10pt Arial,Verdana; 
resize:none; outline:none /* webkit grip focus */;
width:400px!important;
height:400px!important;
}