Is it possible to separate toolbox and workspace?

[Usaid Khan]

Hello, 

I am creating a design in which I want vertical toolbox on the left, which is default in Blockly, and horizontal workspace, detached to toolbox, on the bottom.

Is it possible to separate toolbox and workspace.

Here is my the idea of my design:

[Beka Westberg]

Hello! Thank you for the question =)

That is not currently possible :/ We can only drag blocks within the workspace due to the constraints of how the DOM works. Have you considered placing your toolbox below the workspace like in this google doodle?

Sorry I can't be more help! If you have any further questions always feel welcome to reply =) Best of luck with your project!

--Beka

[Usaid Khan]

Thank you for sharing, Yes I have tried this but how can we add some space between workspace and toolbox like in the screenshot?

[Beka Westberg]

Hello again =)

While I don't think you can actually put space between the workspace and the flyout, you may be able to add a visual element over the workspace that makes it look like there's space.

So the lightest green area would actually be a separate element over the workspace.

I haven't tried this though! so I'm not sure how tricky it would be to position the element properly. You may be able to use our positionables API? But it wasn't designed for this, so I'm not sure.

I hope that gives you some ideas for what to look into! Best of luck!

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/b8376a91-4513-4780-9ac0-0a1968c07e54n%40googlegroups.com.

[Usaid Khan]

Okay got it, I will try that.

Beka one more thing I want to know that is there any function related to scrolling in workspace? Like how can I handle horizontal scrolling on button clicks like in the screenshot?

Is there any functionality like Blockly.getMainWorkspace().options.horizontalScroll = +2px or -2px

[Beka Westberg]

Hello again =)

It seems that it is not currently possible to programmatically scroll the workspace :/ I've filed an issue to track adding an API for this! https://github.com/google/blockly/issues/7176

You could try enabling just the horizontal scrollbar to serve the same purpose. E.g:

```

var myWorkspace = Blockly.inject('blocklyDiv', {

  move: {

    scrollbars: {

      horizontal: true,

      vertical: false,

    }

  }

}

```

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/3c9a5491-d72a-4b55-b2da-3ef76d0b9689n%40googlegroups.com.

[Usaid Khan]

Thank you for the help , and yes, I have used this move property but now I want to add buttons for scrolling.