User-resizable Codemirror instance - codemirror

does anybody know if it's possible to manually resize a Codemirror textbox? What I mean is for example Firefox has this feature that you can manually drag a textarea item - but via Codemirror this doesn't work.
No cross-compatible browser support is needed, if we can find something only for Firefox, that's fine.
Thanks!

You'll have to write some code -- add a handle element, overlay it on the bottom-right corner, and register handlers that call the .setSize method on your editor instance when the element is dragged.

Related

TinyMCE 4.x resize event

I've been searching around (both on SO and around the web) to try to figure out how I can get the current height of the editor after the user has resized it. The TinyMCE 4.x docs don't show any kind of resizing event. When searching around I did come across the ResizeEditor event but that seems to apply only when objects within the editor are resized (which makes it seem like a poorly named event). Despite that, I tried to listen to the ResizeEditor event just to see and it does appear to fire whenever I resize the editor (though, I'm unsure if that's because the actual editor is resizing or because elements within the editor are getting resized, too. In any case, only the event object is passed in as an argument to the listener and I don't see any way to get the editor's current height (after the resize) from that event.
So, is there a way I can do this? To listen to the editor being resized and get its height?
thnx,
Christoph
You should be able to get the entire height of the editor (Menus, Toolbars, StatusBar, content area, etc) with code like this:
tinyMCE.activeEditor.getContainer().clientHeight
tinyMCE.activeEditor.getContainer().clientWidth
When you call tinyMCE.activeEditor.getContainer() you are getting the outermost div that contains all that makes up TinyMCE. From there it is just standard JavaScript to get the relevant dimensions of that element.
Here is an example: http://fiddle.tinymce.com/qigaab/18

GXT Window hides behind iFrame in IE

In my GWT application, I have an iFrame embedding a PDF object. The PDF itself is retrieved from a servlet returning it with application/pdf as content type. In Chrome, my Popup, which is a GXT Window, shows in front of the embedded pdf just fine.
In IE however, the popup hides behind the embedded PDF, even if I make its z-index the max value for IE.
I have also tried to call the Window's focus method after loading it, and looked into alternatives for iFrame, but it led to nothing.
How do I make sure the popup Window will show in front of the PDF? What's causing the fact that the PDF brutally forces itself to the front in the current situation?
Internet Explorer has Windowed and Windowless elements - How the Z-index Attribute Works for HTML Elements. Embedded PDF is displayed using plug-in, so it cannot be behind plain DIV.
You should use the technique when an additional IFRAME is put in front of PDF plug-in, but behind the popup. This effectively will make the popup cover displayed PDF. It seems that GXT itself does not provide such a facility (or it does not work properly). You should probably implement your own popup window by extending the one being used. There you would override show() method to create and size additional IFRAME.
A good starting example is the implementation of PopupImplIE6 in GWT.

JavaFX 2 custom popup pane

The JavaFX 2 colour picker has a button that pops up a colour chooser pane like so:
I'd like to do something similar, in that I'd like a custom pane to pop up when the button is clicked on and disappear when something else is clicked (in my case, a few image thumbnails). What would be the best way of achieving this? Should I use a ContextMenu and add a pane to a MenuItem somehow, or is there something else I should look at?
It's kind of difficult to do well with the current JavaFX 2.2 API.
Here are some options.
Use a MenuButton with a graphic set in it's MenuItem
This is the approach taken in Button with popup showed below's executable sample code.
Use a PopupControl
Take a look at how the ColorPicker does this in it's code.
ColorPicker extends PopupControl. You could do this, but not all of the API required to build your own PopupControl is currently public. So, for JavaFX 2.2, you would have to rely on internal com.sun classes which are deprecated and will be replaced by public javafx.scene.control classes in JDK8.
Use a ContextMenu
So, I think your idea to "use a ContextMenu and add a pane to a MenuItem" is probably the best approach for now. You should be able to do this by using a CustomMenuItem or setting a graphic on a normal MenuItem. The ContextMenu has nice relative positioning logic. A ContextMenu can also be triggered by a MenuButton.
Use a Custom Dialog
To do this, display a transparent stage at a location relative to the node.
There is some sample code to get you started which I have temporarily linked here.
The sample code does relative positioning to the sides of the main window, but you could update it to perform positioning relative to the sides of a given node (like the ContextMenu's show method).
Use a Glass Pane
To do this, create a StackPane as your root of your main window. Place your main content pane as the first node in the StackPane and then create a Group as the second node in the stackpane, so that it will layer over the top of the main content. Normally, the top group contains nothing, but when you want to show your popup, place it in the top group and translate it to a location relative to the appropriate node in your main content.
You could look at how the anchor nodes in this demo are used to see how this might be adaptable to your context.
Is there a relevant update for this for JavaFX8?
There is not much difference of relevance for Java 8, in general the options are as outlined in this post based on Java 2.2 functionality. Java 8 does add Dialog and Alert functionality, but those are more targeted at use of dialogs with borders, titles and buttons rather than the kind of functionality desired in the question. Perhaps you might be able to start from the Dialog class and heavily customize it to get something close to what is needed, but you are probably better off starting from a blank stage or PopupControl instead.

How to disable hover effect to highlight menu items in GWT MenuBar?

I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.

Change content of a Label depending on panel size

once again I've got a question. Since I am using Google Web Toolkit (GWT) at work (along with Java Servlets), I am currently building some user interface with GWT (in Java).
I've got some trouble though. I am using a SplitLayoutPanel which contains a ScrollPanel on the left and another one on the right.
In the left ScrollPanel there's a VerticalPanel with several Labels, which differ in their width. What I want to accomplish, is: if the Label's text doesn't fit in one line, it should display as many characters as possible and have a "..." in the end, if it's not fully displayed.
I am about to add a CustomEvent EventHandler for the Label, which can be fired whenever the Label needs to change its content. Now the problem however is, that I'd need to fire the event whenever the ScrollPanel or its inner VerticalPanel is resized (by dragging the SplitLayoutPanel-Splitter).
Now the question: is it possible to override some sort of "onResize"-Event or at least "onMouseMove"-Event inside the VerticalPanel, so that I could fire the "changeLabelSize()"-method for each Label inside of this VerticalPanel?
How would I go about it? Thank you all for your time in advance! Please ask for anything unclear, so I can clarify it.
Best regards,
Igor.
This can be done easily with the CSS property text-overflow: ellipsis;.
Supported by IE7-, Safari and Konqueror.
And it can be emulated in Firefox.