Issue #568πŸ’¬ AnsweredOpened November 24, 2017by matthewgertner0 reactions

Resize blocks with mouse?

Quick answerby ryandeba

Hi @matthewgertner, I believe this is can be enabled on individual components via the "resizable" property: component.set("resizable", true). It's probably not going to work very well on elements having a display: inline style (a <span> for example), or elements where the height/width is set by % instead of pixels. Th...

Read full answer below ↓

Question

I noticed that in the current demo it is only possible to resize most blocks using the property editor, not by dragging anchors on the block (which is possible with the map element for example). Is this by design or is it simply a feature that has not been implemented yet?

Answers (3)

ryandebaβ€’ November 24, 2017

Hi @matthewgertner,

I believe this is can be enabled on individual components via the "resizable" property: component.set("resizable", true). It's probably not going to work very well on elements having a display: inline style (a <span> for example), or elements where the height/width is set by % instead of pixels.

This is probably not the best way to enable this, but you could do something like this to see it in action: editor.on("component:selected", function(args) { args[1].set("resizable", true); });

artfβ€’ November 28, 2017

@matthewgertner Ryan's solution should work, and, yes, I do not apply them by design for reasons already explained by Ryan but you can actually create blocks/components with resizable enabled

matthewgertnerβ€’ November 28, 2017

@ryandeba @artf Great, thanks for the suggestion. We're playing with the codebase now so we'll give that a try.

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.