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

ryandeba · Accepted Answer

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; }

ryandeba · Answer

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.Modal is not a dom element, so getElementsByTagName is not a valid method. editor.Modal.getContentEl().getElementsByTagName("button") should work though.Defaulting to an empty object here doesn't really make much sense.for (b in buttons)I'm not very famili...

kewilson · Answer

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. ?

No spacing with new button in export window

Question

Answers (3)

Related Questions and Answers

Loop over all components

How to add the button in custom traits

Drag&drop of button on demo has additional css attributes

How to use same CSS for Multiple pages

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories