MDBInput not displaying properly with Nuxt

Topic: MDBInput not displaying properly with Nuxt

lGabranth priority asked 6 months ago

Expected behavior
I expected the input to behave as shown on the demo page. The label should go up a bit and part of the border should erase so the label could still be readable.

Actual behavior
When going from a route to another, the MDBInput component displays everything as intended except the label, which is over the border of the input and thus is barely readable. Typing a character in the input fixes the issue until the route is accessed again.

Resources (screenshots, code snippets etc.) enter image description here

Add comment

Bartosz Cylwik staff answered 6 months ago

0 0 Best answer

<p>Hi! Does it stay like that for you? I've created a new nuxt app and for me the only issue seem to be the middle border that is animating but in the end I can see the label fine. Maybe I've created the app in a different way. Is there any way to create a demo with the error? What versions of MDB Vue, nuxt and npm are you using? </p>

<p>This is how my app looks like:
Inside the <code>index.vue</code> I just added some navigation like this</p>

<pre class="prettyprint"><code><template>
  <nav>
    <ul>
      <li><NuxtLink to="/">Home</NuxtLink></li>
      <li><NuxtLink to="/input">Input</NuxtLink></li>
      <li><NuxtLink to="/select">Select</NuxtLink></li>
    </ul>
  </nav>
</template>
</code></pre>

<p>The pages only contains imported components like in our tutorial: <a href="https://mdbootstrap.com/docs/vue/getting-started/nuxt/" target="_blank">https://mdbootstrap.com/docs/vue/getting-started/nuxt/</a></p>

<p>, so for example:</p>

<p>Then the <code>Input.vue</code> component only has</p>

const input1 = ref("value");
</script>
</code></pre>

Please insert min. 20 characters.

Hi! Does it stay like that for you? I've created a new nuxt app and for me the only issue seem to be the middle border that is animating but in the end I can see the label fine. Maybe I've created the app in a different way. Is there any way to create a demo with the error? What versions of MDB Vue, nuxt and npm are you using?

This is how my app looks like: Inside the index.vue I just added some navigation like this

<template>
  <nav>
    <ul>
      <li><NuxtLink to="/">Home</NuxtLink></li>
      <li><NuxtLink to="/input">Input</NuxtLink></li>
      <li><NuxtLink to="/select">Select</NuxtLink></li>
    </ul>
  </nav>
</template>

The pages only contains imported components like in our tutorial: https://mdbootstrap.com/docs/vue/getting-started/nuxt/

, so for example:

<template>
    <Input />
</template>

Then the Input.vue component only has

<template>
  <section class="m-5">
    <ClientOnly fallbackTag="div">
      <MDBInput label="Example label" v-model="input1" />
      <template #fallback>
        <MDBSpinner />
      </template>
    </ClientOnly>
  </section>
</template>

<script setup lang="ts">
import { MDBInput, MDBSpinner } from "mdb-vue-ui-kit";
import { ref } from "vue";

const input1 = ref("value");
</script>

lGabranth priority commented 6 months ago

Hello !

It does stay like that until a character is typed or removed from the input. I am using the last MDBVue version, yarn 1.22.19 and Nuxt 3.

I forgot to state that I'm fetching data from an API and that these values that I retrieve are the one displayed in the inputs. I added a timeout of 300ms before fetching datas and it seems to fix the issue, I guess there's a timing problem, which would be problematic as I don't see myself delaying every first API call to maintain UI as it would make the app artificially slower.

Bartosz Cylwik staff commented 6 months ago

Could you check if this code also has problems in your app? I'm fetching data inside the onMounted hook and it looks fine like that.

<template>
  <section class="m-5">
    <ClientOnly fallbackTag="div">
      <MDBInput :label="label1" v-model="input1" />
      <template #fallback>
        <MDBSpinner />
      </template>
    </ClientOnly>
  </section>
</template>

<script setup lang="ts">
import { MDBInput, MDBSpinner } from "mdb-vue-ui-kit";
import { ref, onMounted } from "vue";

const input1 = ref("value");
const label1 = ref("");

onMounted(() => {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((res) => res.json())
    .then((data) => {
      input1.value = "new value";
      label1.value = "new label";
    });
});
</script>

Please insert min. 15 characters.

lGabranth priority commented 6 months ago

Good evening, sorry for the delay !

I checked with your snippet and I still had the same issue !

Bartosz Cylwik staff commented 6 months ago

Sorry but I cannot recreate the issue. Any chance to show us some code? Are you using any other packages that could be a problem here? Lastly, did you check in a fresh new app whether the issue still occurs? For example with use of my code above?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Vue
MDB Version: MDB5 4.1.1
Device: PC
Browser: Chrome
OS: Windows 11
Provided sample code: No
Provided link: No

lGabranth

0Support score
2Questions 0Answers 0Snippets