Deion Consider the following code: <div class="highlight

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Text in input and select components is not aligned to each other about nicegui HOT 5 CLOSED

me21 commented on June 11, 2024

Text in input and select components is not aligned to each other

from nicegui.

Comments (5)

chrschorn commented on June 11, 2024

If you want to make them line up, try either giving both elements a label or none of them:

with ui.row():
    ui.input(value="Input")
    ui.select(["Option 1", "Option 2"], value="Option 1")

with ui.row():
    ui.input("Input", value="value")
    ui.select(["Option 1", "Option 2"], value="Option 1", label="Select")

from nicegui.

me21 commented on June 11, 2024

Thank you, I feel stupid 🥴

from nicegui.

falkoschindler commented on June 11, 2024

@chrschorn I just wonder why both elements are well aligned on a plain Quasar page - independent of labels:

<!DOCTYPE html>
<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/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="q-app">
      <div class="row">
        <q-input label="Input" model-value="input value" />
        <q-select model-value="A" />
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({ setup: () => {} });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>

from nicegui.

me21 commented on June 11, 2024

@falkoschindler oh, I'm not sure what's going on here then. Feel free to reopen the issue.

from nicegui.

falkoschindler commented on June 11, 2024

@me21 I found my mistake! We can't use auto-closing tags in HTML. Instead we need to write

<div class="row">
  <q-input label="Input" model-value="input value"></q-input>
  <q-select model-value="A"></q-select>
</div>

This way Quasar yields the same result like NiceGUI. And if you think about it, it makes sense to vertically align the select value in the middle (next to the arrow) if there is no label. If there was no input element, the ui.select without a label would look strange with a value shifted towards the bottom.

from nicegui.

Recommend Projects