codeMirror: How to interactively resize the text area?

[stolp]

I like to add resize handles to a pe:codeMirror instance.

The obvious way does not work: Adding a p:resizable pointing to the codeMirror instance id would just resize the hidden textarea rendered with that id which is useless here.

The div containing the actual editor has no id assigned so I cannot address that instead.

Does someone have a hint on how this can be achieved?
Is there an alternative way to influence the codeMirror size?

[Melloware]

So when I look at the source on this example: https://www.primefaces.org/showcase-ext ... cUsage.jsf

I see the <div> has a class class="CodeMirror cm-s-blackboard" so could you do something like...

Code: Select all

<p:resizable for="@(.cm-s-blackboard)" handles="e,w,n,se,sw,ne,nw"/>

Using the PFS Selector framework to select the item by class.

[stolp]

Thanks a lot, it is a splendid idea (which I was not aware of), but sadly we cannot use query selectors here:

jQuery selectors aka PFS are not supported on the server side... expression "@(.cm-s-blackboard)"

Too bad.

[Melloware]

Let me look. I might have another clever trick or two up my sleeve.

[Melloware]

What about just doing what Resizable is doing and call the JS directely in your page like this line.

https://github.com/primefaces/primeface ... ble.js#L71

You could just configure resizable for what you want and do something like...

Code: Select all

$('.cm-s-blackboard').resizable(your.cfg)