Preferred way to style Blockly Toolbox

[Jing An Tew]

If I only needed to style the width and height of the blockly toolbox (responsive design based off window height/ width), would it be better to create a whole custom category, or simple CSS styling is fine.

From my experience, styling the class ".blocklyToolbox" seems to have some unintended consequences which I'm not too sure how to resolve. 

Thanks.

[epas...@google.com]

In general, CSS is the preferred way to style things. For the toolbox, CSS should work to style the width for vertical toolboxes or the height for horizontal toolboxes, but the code sets the other dimension to 100% of the Blockly div and you can't override that in CSS. If you have a use case for controlling both we'd love to hear more about it, but to implement it you'd likely need your own subclass of the toolbox that doesn't set those attributes.

And if you're seeing unintended consequences with the pieces you can style please let us know what they are! Not all of the CSS styling is thoroughly tested, so any problems people are running into we'd like to know about. =)

Cheers,

Erik

[Jing An Tew]

Taking a look at the original toolbox (with no custom CSS), we have this

When editing the width of ".blocklyToolbox" using Developer console, it cuts off the blocks contained within the category. 

(I would like to clarify that this was the unintended effect I mentioned in the previous post, but I have found out that this doesn't happen when I reinject Blockly by restarting the full page instead of doing a live reload)

So it was mainly a misunderstanding, my bad