Toolbox width

[Руслан И.]

Hello! I just can't figure out out how to set width of toolbox.

Toolbox is defined simply by xml inside html:

<xml id="toolbox" style="display: none">

...

</xml>

I've tried 

.blocklyFlyout {

  width: 300px;

}

and

<xml id="toolbox" style="display: none; width: 300px">

[Andrew n marshall]

The width is calculated by the contents; there is no parameter to specify it. The toolbox is wider when the largest block inside is wider (or taller for horizontal toolboxes). Of course, this can be limited by the available space.

It is probably possible to configure some CSS to set or constrain the size. It will require more than one location, because different parts are configured in different areas.  Start with the .blocklyFlyout class.  You'll might also need to edit Blockly.Flyout.prototype.positionAt_(..) to correct the scrollbar position (class blocklyFlyoutScrollbar).

--
Andrew

--
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.
For more options, visit https://groups.google.com/d/optout.

[Neil Fraser]

The toolbox (categories) and the flyouts (blocks) should automatically size themselves to fit their contents.  I'm curious, do you want them bigger (with whitespace) or smaller (clipped)?

Sent (awkwardly) from an Android device.

--

[Jessica Kulwik]

Hey all,

Sorry to resurrect an old thread. I'm curious if this is something that any additional thought has been put into. 

I'm especially interested in a clipped toolbox. This scenario is interesting for small screen sizes (i.e. mobile/lower-end laptops) and large block sizes (i.e. certain translations use particularly long words for blocks). 

The scenario in mind is a blockly workspace using a toolbox without categories (i.e. similar to the ones in the Fixed Blockly Demo). The blocks in that link have a relatively small width, but if they were quite a bit larger (similar to the blocks in the "Text" category on the Blockly Developers Page), they would take up a large portion of the workspace or possibly take up the entire workspace. 

This brings up the wish for a clipped toolbox. Has any thought been put into this? Does it already exist somewhere?

Thanks!

Jessica

On Tuesday, September 18, 2018 at 8:21:56 AM UTC-7, Neil Fraser wrote:

The toolbox (categories) and the flyouts (blocks) should automatically size themselves to fit their contents.  I'm curious, do you want them bigger (with whitespace) or smaller (clipped)?

Sent (awkwardly) from an Android device.

On Tue, 18 Sep 2018, 06:39 Руслан И., <ruslan...@gmail.com> wrote:

Hello! I just can't figure out out how to set width of toolbox.

Toolbox is defined simply by xml inside html:

<xml id="toolbox" style="display: none">

...

</xml>

I've tried 

.blocklyFlyout {

  width: 300px;

}

and

<xml id="toolbox" style="display: none; width: 300px">

--
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 blo...@googlegroups.com.

[Abby Schmiedt]

Hi Jessica! 

There currently isn't a way to create a clipped toolbox. However, we are working on some features that might make this possible. Some more information on the features we are currently working on for the toolbox can be found here. One of these is giving developers the ability to replace different blockly components such as the Toolbox. I think this would make it possible to create a clipped toolbox relatively easily.

Thanks, 

Abby