MudBlazor/MudBlazor

MudButtonGroup with a mix of MudIconButtons and MudButtons have misaligned borders

Geschlossen

#7.003 geöffnet am 13.06.2023

Auf GitHub ansehenContributor Guide
 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)C# (1.631 Forks)batch import
buggood first issuehas workaround

Repository-Metriken

Stars
 (10.394 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

Bug type

Component

Component name

MudButtonGroup

What happened?

When using a mixture of MudIconButtons and MudButtons inside a MudButtonGroup with MudTooltips causes the border to be off slightly.

image

If you exclude the tooltip, the border match up fine.

I have to manually override the height to get them to align properly

Expected behavior

The border should be aligned for all buttons

Reproduction link

https://try.mudblazor.com/snippet/maQdEAlxpglSoLpF

Reproduction steps

Simply mix MudIconButton and MudButtons inside a MudButtonGroup with MudTooltips around the buttons

Relevant log output

No response

Version (bug)

6.4.1

Version (working)

No response

What browsers are you seeing the problem on?

Chrome, Microsoft Edge, Other

On what operating system are you experiencing the issue?

Linux

Pull Request

  • I would like to do a Pull Request

Code of Conduct

  • I agree to follow this project's Code of Conduct

Contributor Guide

Research-Richtung
Untersuchen Sie das auf MudIconButton und MudButton innerhalb von MudButtonGroup angewendete CSS, wenn sie mit MudTooltip umschlossen sind. Das Problem ist wahrscheinlich eine Höhenabweichung aufgrund des Tooltip Wrappers. Überprüfen Sie das gerenderte HTML und die CSS Regeln für MudButtonGroupItem und MudTooltip, um zusätzliche Polsterung oder Rahmen zu identifizieren, die die Fehlausrichtung verursachen. Sehen Sie sich die Komponentendateien in MudBlazor/src/MudBlazor/Components/Button/ und MudBlazor/Components/Tooltip/ auf relevante Stile an.
Tech Stack
csharp
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
BlazorCSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50