Background: we have TinyMCE React inside a few contexts where the parent element is manually resized by the user (resizable modal dialog, etc.) and we want the TinyMCE component to resize appropriately. In older versions, we did this using the resizeTo functionality documented here. However, that no longer seems to be available after the upgrade.
My previous attempt to resolve this involved using a key based on concatenating the width and height of the editor with a debounce while it was resizing. Basically, whenever the size changed by enough, I tore down the old component and rendered a new one whose config options included the new size. While this is largely effective, it causes an issue where, when you attempt to edit the field after resizing, it flickers and loses focus initially.
Unfortunately, we are using pixel-based size calculations, so specifying the height in percentages instead of pixels won't work.
What is the new official way to do this? Ideally, there would be some new version of editor.theme.resizeTo that we could use instead and dispatch with the key-based solution entirely, but I was unable to find it in any of the documentation.
Just wrap the editor in a div which has the calculated height and width, and then set the editor to height and width of 100%.
Related
I'm using ag-grid ng2 v28.1, and some columns are autosizing, and some are not (using selective column autoresize based on ColId). On both Chrome and Edge. I dug into the autosize code, and something is preventing the dummy container from actually growing its contents based on the dummy row/cells cloned into it. I see the cells with their content but the measuring span doesn't seem to be expanding based on its contents. I have stripped out all my own styles and div layers from my cellRender, and it still doesn't work. I can't find any CSS reason why that span won't expand to consider it's contents.
Anyone ever hit up against this wall?
I think I made some setting changes in vs code which made my import statements look like this.
The default VS code import preview shows 3 or more paths.
What would be the option I should change to revert it back to the default list box view?
My settings.json
The last vscode update to v1.51 added the ability to change the size, height and width, of the suggestion box. It also seems to have set the box height to one lineHeight for some people. There is a command in the command palette to reset the suggestion widget's dimensions:
Reset Suggest Widget Size that should fix your situation.
You can also drag the lower boundary of the box down (or the right edge left and right) to change its dimensions.
The old setting that set the suggest widget's height to some user-defined number of entries (I believe the default was 12) is now gone. If you change its height or width (as well as the width of the extra info flyout box connected to the suggestion widget) that change should be remembered.
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
I need a CodeMirror editor which starts with a certain width and then grows automatically to the right to match the maximum line length. I.e. roughly what CodeMirror does when height is set to auto, but with width.
Here's a self-contained example. The editor grows automatically along the y-axis fine, but not along the x-axis. By tweaking the CSS, I can either have a fixed width editor with a scrollbar, or one which fills the entire width of the browser, but not one which grows as you type. I assume overflow-x is relevant, but I don't understand how it interacts with other CSS size properties set on parent elements. I also tried setting that property on CodeMirror-scroll, but it didn't help.
I believe this can be done using CSS properties alone. In fact I have this behaviour in my application already, but growing to the left, rather than the right, but I don't understand why it happens, or how to reproduce it in a small example.
This question is essentially the same, but for the vertical scrollbar.
Simply add float:left to the CodeMirror div.
<div id="here" style="float:left"></div>
This is not something CodeMirror supports. You may be able to get something working by setting .CodeMirror's width to (-webkit-)fit-content, but there will likely be corner cases where this breaks the scrollbars or cursor placement.
I'm using a TreeViewer within a jface WizardPage and the initial input into the tree causes the WizardPage to grow vertically so that it can show all of the tree's values. When expanding one of the tree's values, then the vertical scrollbar works as expected. I'd like to be able to set the tree's size initially so that it is fixed and the scrollbar is already shown when the WizardPage is first drawn, but doing this isn't particularly obvious to me - the setSize method on the TreeViewer's Tree doesn't seem to do anything.
Any help would be appreciated!
Just for the records for this old question:
We solve this problem in our applications by using an own layout manager which we can set fixed sizes for certain controls (with Swing we had done that by using component.setPreferredSize(size)). If no such fixed size is used, we calculate the preferred size of the control while performing the layout. This prevents making controls getting more and more space depending on the control's content when the user resizes the application window or dialog.