Browse Source

Truncate long picker labels so they no longer overlap the toggle icon

Long label text (e.g. Turkish translations) on MudDatePicker / MudTimePicker overflowed
the input and visually overlapped the calendar toggle icon on the right. Reserve 40px
on the right for the end-adornment icon so the label clips with ellipsis.
pull/25393/head
maliming 6 days ago
parent
commit
dd4b2d3fac
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 8
      framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css

8
framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css

@ -83,3 +83,11 @@
white-space: nowrap;
}
/* Picker label (date / time / color picker): when label is long it overflows into the
toggle icon on the right and visually overlaps the calendar/clock icon.
Reserve ~40px on the right for the end-adornment toggle icon so the label truncates with ellipsis. */
.mud-picker .mud-input-label.mud-input-label-inputcontrol {
max-width: calc(100% - 40px);
}

Loading…
Cancel
Save