I have a dialog in cq5 which is using xtype tabpanel, I am planning to change the default dimensions of dialog using these instructions I still see the default size of dialog even though I increased the width of the xtype panel.
I got it working after I change xtype to dialog
This is a known issue, and has been present since at least CQ 5.3. The only workaround I'm aware of is just as you said, to change the xtype to dialog, set height and width properties on the dialog node, and then add a tabpanel node as a child node of your dialog.
Related
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%.
I'm new with TinyMCE and trying to set the size of some of the buttons in the editor to small and some others' to medium, in TinyMCE 4.
I know about this property toolbar_items_size but this sets all the button's size small or medium. Instead, I'm trying to set the size property of the buttons in editor.buttons[] manually after the buttons get registered with the editor but before the theme gets initialized since the theme uses Factory.create() to create buttons & that sets class btn-<size> to the button, which sets its size.
I've looked into TinyMCE's code too but have not able to figure out a way to do so. Also, I've observed that all the editor's events get fired after the theme gets initialized, like BeforeSetContent,..etc.
I'm using modern theme.
Is there some way to achieve this?
Thanks.
TinyMCE simply does not support what you are trying to do - the buttons on the toolbar(s) are a uniform size. You can pick that uniform size (as you reference) but you can't mix buttons of different sizes on the toolbar.
I wish to have the default table width display in the editor at a width that is visible as currently the default is close to zero width. The screenshot below shows the default width and below that is when you specify a set width via the properties option. Is there a way to have the table default to a certain desired width? Thx
At the moment not. There are various wishes for customizing the tinymce, but before we provide specific solutions we must find a generic method for custom configuration, as we want to be sure that we don't have to support tinymce as well. So this won't be available for some time, unless someone works out a solution and contributes it.
Why is it not possible to configure tinymce at the "normal" way with tinymce.init...?
I want to set up Page Plugin on my website to display nicely on screens with a variety of resolutions and pixel densities. In order to truly achieve that, I'd have to have to possibility to use rems in data-width attribute. Unfortunately, when I enter a rem value, the data-width attribute is ignored.
Is there a way to make the plugin behave nicely with rems?
To make the Facebook Page Plugin responsive on initial page load, instead of using rems, you'll want to remove the data-width attribute and instead add
data-adapt-container-width="true"
This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.
I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).
No Dynamic Resizing
The Page plugin works with responsive, fluid and static layouts. You
can use media queries or other methods to set the width of the parent
element, yet:
The plugin will determine its width on page load.
It will not react changes to the box model after page load.
If you want to adjust the
plugin's width on window resize, you manually need to rerender the
plugin.
Source: https://developers.facebook.com/docs/plugins/page-plugin
You could make it dynamically responsive by reinitializing the widget on browser resize, but by doing that you run the risk of eating up memory very quickly.
There is some other stuff you can try here as well
Responsive width Facebook Page Plugin
A question about Canvas Height setting in the Facebook Settings.
There are 2 options Auto-Resize and Fluid and they seem to function in the same way.
In the Canvas Tutorial, it seems that the 2nd option should be scroll bars for Canvas Height, so I'm assuming that Fluid option is a new feature.
But what is the difference between Canvas Height set to Auto-Resize or Fluid?
Here is the documentation
http://developers.facebook.com/blog/post/549/
If you would have placed your cursor over the question sign near the Canvas Height option, you might have seen this:
"Settable allows you to set the height via FB.Canvas.setSize() method in JavaScript SDK with default set to 800px. Fluid sets the height dynamically to fit the page and shows scrollbars if content exceeds the page size."
Also, the options are not Auto-Resize and Fluid, but Settable and Fluid