microsoft/vscode-codicons

Icon buttons size problem inside inputs

AlencarGabriel opened this issue · 4 comments

AlencarGabriel commented

image
latest version (0.0.32)

image
version 0.0.26

I noticed that in the latest version, icon buttons inside textboxes are becoming misaligned and bigger than they used to be.

I'm using the @vscode/webview-ui-toolkit components in webview. Just downgrading the vscode-codicons version the problem stops occurring.

ps.: this problem happens with other icons as well

AlencarGabriel commented

@daviddossett , could you please rate this issue? I see that some commits were made, but the reported issues are not being addressed.

daviddossett commented

Are you only seeing this in the webview toolkit? cc @hawkticehurst for toolkit-related issues.

I'm not seeing this in VS Code's core UI, so trying to understand what is causing this.

AlencarGabriel commented

@daviddossett the problem actually happens in the webview toolkit. But only in newer versions of vscode-codicons.

If the problem really is in the toolkit, can you transfer this problem there?

AlencarGabriel commented

I found the problem:

<vscode-text-field required value="teste">Value
    <section slot="end" style="display:flex; align-items: center;">
        <vscode-button appearance="icon">
            <span slot="end" class="codicon codicon-plus"></span>
        </vscode-button>
    </section>
</vscode-text-field>

Fix:

<span class="codicon codicon-plus"></span>

Just removed slot="end" of icon and it worked.

image

  • ❤️1