Can I set the height of the editor for each instance I use?

[zigrivers]

Thanks for a great tool, but I'm having trouble figuring out how to set the height for each instance that I use.

For example, for one instance I'd like to set the height to 300px, but for a different one I'd like to set it to 100px.

I was playing around with the pass-through classes, if I understand them correctly, but I couldn't get it to work.

I have my html set up like so:

<text-angular placeholder="Write discovery insight here..."
                  ta-html-editor-class="myform-content"
                  ta-focussed-class="myfocused"
                  ng-model="ndi.insight">
</text-angular>

And then I set up the CSS classes as follows:

.myform-content {
    height: 100px;
    max-height: 100px;
}

.myfocused {
    height: 100px;
    max-height: 100px;
}

This doesn't seem to effect the control except when I click inside the editor. When I click inside the editor it adds a space between the toolbar and the text editor area (seems to be based on the myfocused class). However, the myform-content class doesn't seem to have any impact on the control.

I apologize if I'm missing something basic here as I'm new to the software dev world.

I'd like to be able to set the height for this control individually vs. globally if that's possible.

Thanks for any help or guidance you can provide!

[PhilFlash]

Hi,
If you want to init the height for an instance (with textarea auto grow):

  <div text-angular="text-angular" name="htmlcontent1" ng-model="ta.htmlcontent1" 
        ta-text-editor-class="form-control myform1-height" 
        ta-html-editor-class="form-control myform1-height">
  </div>

Here is the ccs for a height of 300px:

.ta-editor.form-control.myform1-height, .ta-scroll-window.form-control.myform1-height  {
    min-height: 300px;
    height: auto;
    overflow: auto;
    font-family: inherit;
    font-size: 100%;
}

.form-control.myform1-height > .ta-bind {
    height: auto;
    min-height: 300px;
    padding: 6px 12px;
}

If you want a static height (textarea with fix height):

  <div text-angular="text-angular" name="htmlcontent1" ng-model="ta.htmlcontent1" 
        ta-text-editor-class="form-control myform2-height" 
        ta-html-editor-class="form-control myform2-height">
  </div>

Here is the ccs for a height of 300px:

.ta-editor.form-control.myform2-height, .ta-scroll-window.form-control.myform2-height  {
    height: 300px;
    min-height: 300px;
    overflow: auto;
    font-family: inherit;
    font-size: 100%;
}
.form-control.myform2-height > .ta-bind {
    min-height: 300px;
    padding: 6px 12px;
}

The plunker for the examples:
http://plnkr.co/edit/yYl83pPN71k3he9EicKl?p=info

Philippe

[fresjitendra]

thanks it works

[sudha1991]

For me this worked., just added in my css..
.ta-editor.ta-html,
.ta-scroll-window.form-control,
.ta-bind {
min-height: 100px !important;
}

[fts-mage]

It work for text-only ! Popover seems dislike this :/. More link/image is deep in the edited content more the popover is shifted to the bottom.

http://plnkr.co/edit/WzJdlcPAmqAm5kk0rYBo?p=preview