search

zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.
https://www.mdui.org
4.18k stars 365 forks source link

mdui-text-field number type covers text with label if value is not number #342

Open he00741098 opened 3 months ago

he00741098 commented 3 months ago

https://github.com/user-attachments/assets/cab66b41-f630-41b9-b50d-012a2208a5ee

Here is the basic html that I used.

         <mdui-text-field
          clearable
          type="number"
          variant="outlined"
          label="Starting Total number of Cu2+ in bath side"
          value="900"
          class="paramInput"></mdui-text-field>

Here is the css class

  .paramInput {
    margin-bottom: 10px;
    /* background-color: gray !important; */
  }
zdhxiong commented 1 month ago

It seems to be a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528. You can temporarily use <mdui-text-field pattern="[1-9]*"></mdui-text-field> instead.