Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

ui.number input field size changes when the attributes min & max are set #4220

Closed
nkonts opened this issue Jan 14, 2025 · 1 comment
Closed

ui.number input field size changes when the attributes min & max are set #4220

nkonts opened this issue Jan 14, 2025 · 1 comment
Labels
bug Something isn't working dependencies Pull requests that update a dependency file

Comments

@nkonts
Copy link

nkonts commented Jan 14, 2025 •
edited by rodja
Loading

Description

Hi,

I just noticed the following curious behavior:

When using ui.number and when setting the min & max attribute, the size of the input field changes.

  ui.number(value=0, label=0)
  ui.number(value=0, label=1, min=-2)
  ui.number(value=0, label=2, max=2)
  ui.number(value=0, label=3, step=1)
  ui.number(value=0, label=4, min=-2, step=1)
  ui.number(value=0, label=5, max=2, step=1)
  ui.number(value=0, label=6, min=-2, max=2)
  ui.number(value=0, label=7, min=-2, max=2, step=1)

Result:
{16D36D06-96FB-4F07-974C-436223CD9BE2}

It is expected that each field has the same default size

version:
nicegui==2.8.1
@nkonts nkonts changed the title ui.number input field size changes when the attributes min, max and step are set ui.number input field size changes when the attributes min & max are set Jan 14, 2025
@falkoschindler
Copy link
Contributor

falkoschindler commented Jan 17, 2025 •
edited
Loading

Thanks for reporting this issue, @nkonts! What a strange bug!

But I just managed to reproduce the behavior without NiceGUI:

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.17.6/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="q-app" style="display: flex; flex-direction: column; align-items: flex-start">
      <q-input type="number"></q-input>
      <q-input type="number" min="0" max="1"></q-input>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.17.6/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({ setup: () => ({}) });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>

So I guess we can't do much about it and it needs to be fixed upstream.
Maybe you like to report it to https://github.com/quasarframework/quasar/?

@falkoschindler falkoschindler closed this as not planned Won't fix, can't repro, duplicate, stale Jan 17, 2025
@falkoschindler falkoschindler added bug Something isn't working dependencies Pull requests that update a dependency file labels Jan 17, 2025
@nkonts nkonts mentioned this issue Jan 18, 2025
Open
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug Something isn't working dependencies Pull requests that update a dependency file
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@falkoschindler @nkonts