Re: Is it possible to display the toolbox categories in two columns?

[Abby Schmiedt]

Hello!

Just to clarify, do you always want two columns of categories? Or when the screen grows to a small enough size, do you want it to wrap the contents resulting in a toolbox with two columns? 

Cheers, 

Abby

On Monday, March 22, 2021 at 11:47:30 PM UTC-7 adt.t....@gmail.com wrote:

Hello.

I'm using blockly-vue and I'm in trouble.

Like

https://blocklycodelabs.dev/codelabs/custom-toolbox/index.html?index=..%2F..index#2

Is it possible to apply css to toolbox and display two columns of categories?

For blocklyToolboxContents, blocklyTreeRow, etc.

Specifying display: flex; flex-wrap: wrap; did not take effect.

[Abby Schmiedt]

Hello!

So I don't know a way to do this with purely CSS. I was curious how difficult this would be to do by overriding the toolbox, so I created this example. I tried to comment the places that I had to change to make this work. It gives you the following structure: 

<div class="blocklyToolboxContents">

    <div class="column">

        <div class="toolboxCategory"></div>

    </div>

    <div class="column">

        <div class="toolboxCategory"></div>

    </div>

</div>

It breaks navigating the toolbox using the keyboard though. I would look into overriding onKeyDown_ to fix this behavior.

Let me know if you have any questions. 

Cheers, 

Abby 

On Tuesday, March 23, 2021 at 10:04:38 PM UTC-7 adt.t....@gmail.com wrote:

Hello Abby

I always want the categories to be displayed in two columns.

2021年3月24日水曜日 13:56:44 UTC+9 Abby Schmiedt: