Skip to content

FlatButtonUI weird border issues #1042

@Frank-99

Description

@Frank-99

I was trying to have a button with a toolBar style, but when I did this:

FlatButton button = new FlatButton();
button.setButtonType(ButtonType.toolBarButton);

I got a focusBorder, which a normal toolBarButton in a toolBar doesn't have:
Image
So I played with settings and I found out that if I set these properties in the Laf file (or if I instead use setFocusable(false)):

Component.focusWidth = 0
Component.innerFocusWidth = 0
HelpButton.focusWidth = 0
HelpButton.innerFocusWidth = 0
Button.focusWidth = 0
Button.innerFocusWidth = 0
Button.default.focusWidth = 0
Button.default.innerFocusWidth = 0
Button.toolbar.focusWidth = 0
Button.toolbar.innerFocusWidth = 0

It fixes the issue, but I still noticed weird border insets/spacing:
Image

So I tried with this button type:

button.setButtonType(ButtonType.borderless);

But with the properties set, I still get a focus border:
Image
The only way to fix it that I found is to set it not focusable manually:
button.setFocusable(false);
which results in this:
Image

This is what I was looking for, it doesn't feel intuitive, I thought I would achive this result by default just by setting the style to toolBarButton, so either I'm missing something or there is some weird logic around the focus border drawing...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions