Issue #855Opened February 9, 2018by kewilson2 reactions

[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)

ryandebaFebruary 10, 20181 reactions

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

ryandebaFebruary 10, 20181 reactions

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 familiar with how to work with the HTMLCollection object returned by getElementsByTagName, but I suspect that iterating over it like this might not be valid. I'd recommend switching this to querySelectorAll as that will return an array (or at least an iterable object that closely resembles an array).

Something like this might work:

let buttons = editor.Modal.getContentEl().querySelectorAll("button");

buttons.forEach(function(node) {
  node.style.border = "3px solid black";
});
kewilsonFebruary 9, 20180 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.