Adjust default height JQTE

Question

How can I change the default height of a JQTE editor?
I've tried:

$("textarea").jqte({
height:"400px"
});

The document does not say anything about this.

score 4 · Answer 1 · answered May 20 '14 at 07:31

4

You should try changing the min-height value for jqte_editor in jqte stylesheet:

 /* editor area */
.jqte_editor, .jqte_source {
    min-height:300px;
}

answered May 20 '14 at 07:31

Shrolox

663
6
22

You will need to increase the specificity of your selector if the JQTE CSS is included after your styling (eg. `body .jqte_editor, body .jqte_source` or even `.jqte_editor.jqte_editor, .jqte_source.jqte_source`) – Joe May 20 '14 at 11:41

score 2 · Answer 2 · answered May 01 '15 at 08:23

To lock editors height so a scrollbar appears instead of the editor expanding, you need to set .jqte_editor height or min-height. You also need to set max-height.

What happends next is a jqte bug:

Select a text and add bold/italic or some other formatting
Remove the formatting
The selected text suddenly inherits the .jqte_editor height values and pushes every element (text) beneath further down

Fix (jqte version 1.4.0)

Open the javascript file jquery-te-1.4.0.js.

Search and find function affectStyleAround(element,style)

Replace:

if(selectedTag && style==false)
{
    // apply to the selected node with parent tag's styles
    if(selectedTag.parent().is("[style]"))
        selectedTag.attr("style",selectedTag.parent().attr("style"));

    // apply to child tags with parent tag's styles
    if(selectedTag.is("[style]"))
        selectedTag.find("*").attr("style",selectedTag.attr("style"));
}

With this:

if(selectedTag && style==false)
{
    // apply to the selected node with parent tag's styles
    if(selectedTag.parent().is("[style]") && !selectedTag.parent().is(".jqte_editor"))
        selectedTag.attr("style",selectedTag.parent().attr("style"));

    // apply to child tags with parent tag's styles
    if(selectedTag.is("[style]") && !selectedTag.parent().is(".jqte_editor"))
        selectedTag.find("*").attr("style",selectedTag.attr("style"));
}

Notice the added code:

 && !selectedTag.parent().is(".jqte_editor")

Good luck!

I think the second part should be "if(selectedTag.is("[style]") && !selectedTag.is(".jqte_editor"))" (drop the .parent() bit) — Etherman, Nov 30 '15 at 16:06

score 1 · Answer 3 · answered Apr 14 '14 at 05:58

1

try this

$('.jqte_editor').css({ height: '250px' });

answered Apr 14 '14 at 05:58

mahfuz01

453
4
20

score 0 · Answer 4 · answered Apr 13 '14 at 06:10

0

They don't provide an option, but you can do this:

$("textarea").css('min-height','400px').jqte();

This will automatically set the height to minimum of 400px

answered Apr 13 '14 at 06:10

Amit Joki

58,320
7
77
95

score 0 · Answer 5 · answered May 17 '15 at 20:47

0

maybe too late but i was looking for a solution too without changing the original css as some pages i want it default and some i want it custom size. simple set inline css after the plugin js. something like this.

$('.te_editor').jqte({
});

<style>
.jqte_editor{height:350px;max-height:500px;}
</style>

answered May 17 '15 at 20:47

samjones39

163
1
2
13

Your selector on JS are wrong, it should be `.jqte_editor`, the same as CSS. Also, always put the styles on the header of the document, before the JavaScript code. – Dinei Oct 01 '15 at 15:18

score 0 · Answer 6 · answered Nov 30 '15 at 16:19

I applied the patch suggested by VKS (with a slight mod, see my comment on his answer).

I use something like this to try to calculate the height of the edit area taking the original textarea "rows" attribute (without VKS's patch this causes horrible problems):

var $areas = $("textarea.html-editor");
$areas.each(function (index, textarea) {
    var $area = $(textarea);
    $area.jqte();
    var $editor = $area.closest(".jqte").find(".jqte_editor");
    var height = ($area.attr("rows") * 25 / 15) + "em";
    $editor.css({ "min-height": height, "max-height": height });
});

(that calculation rows*25/15 is just what happens to work for me in my particular case using "em"s - you will want to use your own calculation, there are many solutions e.g. measure "px" height of span with desired font etc.)

Mark Löwe · Answer 7 · 2015-12-17T00:39:13.493

Here is THE solution. Go to the non-min version to better see this solution. I just added a tiny amount of code to make it possible to pass in "height" as a startup option that gets perfectly inserted to control the height of the component.

On line 215 of version 1.4.0, add this modification:

<div class="'+vars.css+"_editor"+'" style="height:'+vars.height+';"></div>

You're adding the following code:

style="height:'+vars.height+';"

Then pass in {height:'500px'} into your code like so:

$(".myCustomTextField").jqte({'height': '500px'});

DONE!

score 0 · Answer 8 · answered Mar 25 '16 at 16:33

If you want to change the height of a specific textarea, i sugest you to put your text area inside a div like this

<div class="custom-jqte">
  <textarea id="yourtextarea"></textarea>
</div>

then, put this on a css file

.custom-jqte .jqte_editor {
   height: 400px;
}

With this method, you avoid changing the jquery-te stylesheet

Adjust default height JQTE

8 Answers8