Trumbowyg: How to adjust height?

[RobKohr]

How do you adjust the height of the text area? It seems to be stuck at a height, and css doesn't seem to effect it.

[lukasmedia]

Spend a few hours on this "bug". Finished reading all suggestions on Github. Best solution should be:

    #tx2 .trumbowyg-box, #tx2 .trumbowyg-editor {
        min-height: 100px !important;
    }
    #tx2 .trumbowyg-editor, #tx2 .trumbowyg-textarea {
        min-heigh: 100px !important;
        border:1px solid red;
    }

But the height is always fixed 300px. Any help would be great.

EDIT:

.trumbowyg-box, .trumbowyg-editor { min-height: 150px; }

works great!

[aswzen]

is there any way to do it without changing the css?

[Alex-D]

Nope, since it's defined in the default CSS, you should update the CSS if you want to change this value.

As said above, this should works:

.trumbowyg-box,
.trumbowyg-editor {
  min-height: 150px;
}

[Jockel-H]

Of course it is possible to adjust the css by jQuery, which might be handy if you need different heights on one page or don't want to mess up the css:

$( "#shorttext" ).trumbowyg({ /* some configuration*/ });
$( "#shorttext" ).closest(".trumbowyg-box").css("min-height", "100px");
$( "#shorttext" ).prev(".trumbowyg-editor").css("min-height", "100px");

$( "#longtext" ).trumbowyg({ /* other configuration*/ });
$( "#longtext" ).closest(".trumbowyg-box").css("min-height", "500px");
$( "#longtext" ).prev(".trumbowyg-editor").css("min-height", "500px");

[masteramuk]

Spend a few hours on this "bug". Finished reading all suggestions on Github. Best solution should be:

    #tx2 .trumbowyg-box, #tx2 .trumbowyg-editor {
        min-height: 100px !important;
    }
    #tx2 .trumbowyg-editor, #tx2 .trumbowyg-textarea {
        min-heigh: 100px !important;
        border:1px solid red;
    }

But the height is always fixed 300px. Any help would be great.

EDIT:

.trumbowyg-box, .trumbowyg-editor { min-height: 150px; } 

works great!

it works.. thanks bro

[smalos]

Of course it is possible to adjust the css by jQuery, which might be handy if you need different heights on one page or don't want to mess up the css:
```

This doesn't work for me, even though

$( "#shorttext" ).closest(".trumbowyg-box").length

returns 1 (which means the element is being found)

[vaibhavpandeyvpz]

For consistency with Bootstrap form layout, I figured out below sass:

.trumbowyg {
    &-box.trumbowyg {
        margin: 0;
    }

    &-details p:not(:last-child) {
        margin-bottom: 1em;
    }

    &-box, &-editor {
        min-height: 10em;
    }
}