I have a grapesjs editor that is working perfectly. However, because I am using multiple plugins, I am duplicate preview buttons.
Here is a snippet of my initializaion:
editor = grapesjs.init({
container: '#my-element',
fromElement: 1,
showOffsets: 1,
allowScripts: 1,
plugins: ['gjs-preset-webpage', 'gjs-preset-newsletter'],
...
I have attached a screen of what I am seeing. As you'll notice, there are duplicate "preview" buttons. If I remove a plugin, only one set of icons will appear (as expected).
This is not correct, but was trying something along these lines to see if I could remove the buttons manually.
editor.Panels.removeButton('preview', [{
//
}]
);
Thank you for any suggestions.
You can remove duplicate buttons as mentioned below. the first parameter is the pane
editor.Panels.removeButton('devices-c', 'block-editor');
Related
I have 3 lines graphed, and when I hide one, the color of the bottom line changes to the color of the top one, how do I keep the color the same regardless of the hidden line?
It took me some time to find a way to achieve what you wanted and I'm giving you live demo (React Google Charts - Toggle Line Visibility) so you can inspect it and see if that's what you wanted.
It's a little bit hacky, but hey it's working fine, I guess.
What I did is:
Listen for select event and detect when legend is pressed
Apply series with some configuration and make it state variable for our custom Graph component
By setting lineWidth: 0 and tooltip: false we fake line invisibility. Line width trick is obvious... Tooltip is disabled so you can't get tooltip when you try to hover over "invisibile" line on the graph (try to comment out line of code which sets tooltip: false and go hover over the area where dot of an "invisible" line is suppose to be to see what I mean by that)
I hope this helps, because there is nothing out there for this scenario in React.
https://codesandbox.io/s/Op8BoLzQ
If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen.
I've tried to set min-height to height, now it is acting correctly regarding this issue, but the content is not auto-resizable anymore.
Yes. The problem is that the part of the editor that's contentEditable is only one line right now, here's a screenshot to illustrate which part of the editor is the dom node with contentEditable set to true.
Instead, if you want to make the area of the editable interface larger, you need to style .public-DraftEditor-content
I've forked the sandbox to show this
That fixes the issue.
When setting clicksToEdit : 2 option to edit a cell using grid edit plugin, the textfield sets focus properly. When dragging or resizing the modal window the textfield needs to remove the focus.
The issue is that the textfield is not blurred.
Here's a screenshot of the issue:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 2
})
],
I have attached the code in JSFiddle.
Steps to reproduce the issue:
double click to edit the name.
resize the panel from right bottom.Now the textbox have a focus and position of textbox is changed.
As far as I can see from your code, this has to be an unfixed issue with ExtJS 4.2.x. I am not sure about ExtJS 4.2.4 and 4.2.5, but as of 4.2.3 the bug is still there.
The "funny" thing about this is that the datepickerfield editor does it correctly. Possibly you can look at the code of datepickerfield and make an override for textfield based on that.
In newer versions of ExtJS (5.1 and 6.0), the problem does no longer show.
You could ask for workaround availability in the Sencha forums.
EDIT: A valid workaround would be to add to your cellediting plugin:
pluginId: 'editing'
and to your panel:
listeners:{
resize:function(panel) {
var plugin = panel.down('grid').getPlugin('editing');
if(plugin.editing) plugin.cancelEdit();
}
}
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.