Dynamic label in MDB Input appears stricken through


Topic: Dynamic label in MDB Input appears stricken through

Expected behavior The label should appear clearly.

Actual behavior The label is appearing as crossed when on focus.

Resources (screenshots, code snippets etc.)

We are using the following line:

and in typescript we are setting this label as:

const rxInputLabel = ref('Label');

When setting a label with the following:

it is shown correctly.


Bartosz Cylwik staff answered a year ago

Hi! Could you create a snippet where we could see what is going on? Or show some code here in comments? Does it happen every time or just on some viewport sizes? I've created a snippet and cannot recreate the issue

https://mdbootstrap.com/snippets/vue/b-cylwik/5830794#html-tab-view

Are you using the 4.1.1 version of the package?


Hello,

I have the same issue. I am trying the following:

https://mdbootstrap.com/snippets/standard/ntallas-ioannisnokia-com/5834694#js-tab-view

The thing is that I see that MDB cannot detect the number of characters of each label.

Dimitris


Bartosz Cylwik staff commented a year ago

Hello! I cannot recreate the issue with my fresh vue app nor inside the snippets. Bellow I'm going to ask some questions that could help me figure out what may be happening.

Is the same issue visible in this snippet?

https://mdbootstrap.com/snippets/vue/b-cylwik/5835045#js-tab-view

It is the same snippet you have created but used inside the vue (script setup is not working inside the snippets app).

Did you try to create a new app and see if the same issue occurs there? If the issue in fresh app is visible, could you publish a demo for me? If you are using the mdb cli - mdb publish will publish a demo into mdbgo.

Are you using any other ui kits or packages that could cause problems? I've seen similar issue in different technology where some classes had conflicts and were overwriting css styles.

Are you using just vue or maybe it is nuxt app?

Best Regards!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags