[QUESTION] No spacing with new button in export window
Question
I've implemented a new plugin that adds another button in the export window, it's working fine. However when the page displays there isn't a space between it and the existing "Export ZIP" button.
How might I go about adding a space the grapesjs way? Is it just figuring out which html dom element properties to tweak? .. e.g., https://www.w3schools.com/jsref/dom_obj_all.asp
Answers (3)
Hi @kewilson,
If I'm understanding your issue correctly, I bet setting the left margin instead of left padding would work a lot better...is this screenshot close to what you're trying to accomplish? If so, you could replace your button.style.paddingLeft = "30px" code with button.style.marginLeft = "10px". Or you could do this in css (create a custom css file and load it right after grapes.min.css): .gjs-mdl-content .gjs-btn-prim + .gjs-btn-prim { margin-left: 10px; }
Hi @kewilson,
This is a bit difficult to work with without a live code example (like a jsfiddle demo), but I'm seeing a few issues:
let buttons = editor.Modal.getElementsByTagName("button") || {};- This is probably throwing an error since
editor.Modalis not a dom element, sogetElementsByTagNameis not a valid method.editor.Modal.getContentEl().getElementsByTagName("button")should work though. - Defaulting to an empty object here doesn't really make much sense.
- This is probably throwing an error since
for (b in buttons)- I'm not very familiar with how to work with the
HTMLCollectionobject returned by getElementsByTagName, but I suspect that iterating over it like this might not be valid. I'd recommend switching this toquerySelectorAllas that will return an array (or at least an iterable object that closely resembles an array).
- I'm not very familiar with how to work with the
Something like this might work:
let buttons = editor.Modal.getContentEl().querySelectorAll("button");
buttons.forEach(function(node) {
node.style.border = "3px solid black";
});
ok so button.style.paddingLeft = "30px"; works but I've noticed that the border area where the buttons reside don't distinguish between the two .. i.e., no button border around each button's text. Because the Export ZIP button is not under our control how might we go about adding a button border around it and subsequently our own .. eg with round corners, etc. ?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1966
[QUESTION] Loop over all components
Hi all, I want to create a socket for every button that I add to the canvas. This is working just fine. However, when I reload (using stora...
Issue #1720
[QUESTION] How to add the button in custom traits
Hi, I try to add a button to my custom traits for my custom blocks but its not working fine as expected and also need to know how to call t...
Issue #954
[Question] Drag&drop of button on demo has additional css attributes
Hi, On the newsletter demo, when drag&dropping a button, some additional css attributes are added to the <a>. It seems like they come from...
Issue #1329
Question: How to use same CSS for Multiple pages
Hello Grapejs Team, We've been working on Multi-page Website Builder. For each project there will be multiple html pages with single common...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.