Adding padding to Flyoutbutton in Toolbox

[Jeffrey Lee]

Hello, I would like to ask if there are any ways I can add padding to the flyout button in toolbox

All I can find is adding a CSS class but it cannot do anything, I am wondering if there are anyway to do it 

This is something that i am trying to accomplish ,

Thank You

Jeffrey

[Beka Westberg]

Hello Jeffrey!

Have you tried styling using the .blocklyFlyoutButton css class? The web-class only applies to the text, but the .blocklyFlyoutButton should allow you to access all of the parts of the button. I recommend using your browsers debug viewer to explore :D

The only possible issue I can see is that any styling done to .blocklyFlyoutButton would apply to all of the buttons, not a particular button. But you might be able to work around that using more advanced selectors if it becomes a problem for you. Hopefully it doesn't!

I hope that helps! If you have any further questions please reply =)

--Beka

[Jeffrey Lee]

Hello Beka, 

Thanks it works.

This is the code: (i added customFlyOut as web-class)

```

.customFlyOut {

&.blocklyFlyOutButton {

fill: colors.$blue-063;

.blocklyFlyoutButtonShadow,

.blocklyFlyoutButtonBackground {

width: 100px;

height: 30px;

}

.blocklyText {

transform: translate(7px, 3px);

}

}

}

```

I actually managed to change to width and height but I cannot change the x and y coordinate, and the relative position doesnt work either, so i was thinking if I need to do the extend class and override and register that sort of thing, like here, but i dont really know what kind of name i should use to register, here is the doc

And then I realize i can use transform translate to move text, and now the problem solved.

But i am still curious the if i can solve this problem using extend class and override and register the change. Which is something like this in codelab tutoria for customizing toolbox category

```

class CustomCategory extends Blockly.ToolboxCategory {

/**

* Constructor for a custom category.

* @override

*/

constructor(categoryDef, toolbox, opt_parent) {

super(categoryDef, toolbox, opt_parent);

}

/** @override */

addColourBorder_(colour){

this.rowDiv_.style.backgroundColor = colour;

}

}

Blockly.registry.register(

Blockly.registry.Type.TOOLBOX_ITEM,

Blockly.ToolboxCategory.registrationName,

CustomCategory, true);

```

Anyways thanks for your reply Jeffrey