mdb-input checkbox / radio

web
mobile

Topic: mdb-input checkbox / radio

digitalmanagerguru pro asked 5 months ago

Expected behavior

I expect mdb-input to work equally for any kind of type

Actual behavior

When using type checkbox or radio, the mdb-input doesnt appear.

Resources (screenshots, code snippets etc.)

I've created a custom-mdb-input, basically like this:

<template>
<div>
    <mdb-input v-bind="$attrs" @input="$emit('input', $event)">
        <slot></slot>
    </mdb-input>
</div>
</template>

<script>
import { mdbInput } from 'mdbvue';

export default {
  name: "CustomMdbInput",
  components: {
    mdbInput
  },
}
</script>

<style scoped>

::v-deep .md-form input[type]:focus:not([readonly]) {
    box-shadow: none !important;
    border-bottom: solid 2px #8470f2;
  }

::v-deep .md-form label, 
::v-deep .md-form p, 
::v-deep .md-form span {
    font-family: Nunito, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
    color: #aaaeb3;
    text-transform: uppercase;
  }

::v-deep .md-form p,
::v-deep .md-form span {
    cursor: default;
    line-height: 2.2;
  }

::v-deep .md-form span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: normal;
    text-transform: unset;
    color: grey;
  }

::v-deep .md-form label.active,
::v-deep .md-form textarea~label.active,
::v-deep .md-form input[type]:focus:not([readonly])+label {
    color: #8470f2!important;
    font-size: medium;
    line-height: 1;
  }

</style>

But when I use

<custom-mdb-input type="checkbox"> or <custom-mdb-input type="radio"> it doesnt work as expected. Since I get this:

<div data-v-c53a739e="" id="terms" type="checkbox" label="I Accept">
    <div data-v-c53a739e="" class="form-check">
        <input data-v-fd1539ca="" id="terms" type="checkbox" step="1" aria-label="I Accept" class="form-control form-check-input">
        <label for="terms" class="form-check-label mr-5">I Accept</label>
    </div>
</div>

instead of:

<div data-v-c53a739e="" class="form-check">
        <input data-v-fd1539ca="" id="terms" type="checkbox" step="1" aria-label="I Accept" class="form-control form-check-input">
        <label for="terms" class="form-check-label mr-5">I Accept</label>
</div>

It seems there is a problem on the mixins of mdbInput for what I quickly checked.And that "mr-5" also added by the mixin, why is inserted?! We can't even added a labelClass="mr-0" to deny it. :/

Hope you guys can fix this. Thanks!


Magdalena Dembna staff premium answered 5 months ago

I really cannot figure out what is the problem here. Firstly, the mdbInput works with both types - checkbox and radio, although the appearance, by design, is not the same as text input, so I don't understand what does it mean that mdb-input doesn't appear. The mr-5 class creates a gap between checkbox and label, so it's not optional. You can select the label with a custom select and overwrite the given styling.

Secondly, I need you to describe specifically what is the effect you would like to achieve - is it just customizing label? What is the problem you would like us to fix? Kind regards, Magdalena


digitalmanagerguru pro answered 5 months ago

the mdbInput works with both types - checkbox and radio

yes it works. What I meant is that when using custom-mdb-input, with radio or checkbox, then mdb-input doesnt appear.

I am using an custom Component that uses mdbInput one. I've put the code above.

Add that custom component to your project and then use it on a page as

<custom-mdb-input type="checkbox" />

It will generate a different html. I am using type=text, password and email without any problem. radio and checkbox generates a different html what makes them being hidden.


norsk_test answered 5 months ago

The problem is caused by type="checkbox" on outer layer - I believe it has something to do with v-bind="$attrs". I have created a component which takes additionally one property - inputType and it seems to work fine:

<custom-component inputType="checkbox" label="Test" />

<template>
  <div>
     <mdb-input v-bind="$attrs" :type="inputType" id="checkbox1" />
  </div>
</template>

<script>
import { mdbInput } from "mdbvue";

export default {
  name: "HelloWorld",
  components: {
    mdbInput
  },
  props: {
    inputType: {
      type: String,
      default: 'text'
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Kind regards, Magdalena


digitalmanagerguru pro answered 5 months ago

I believe it has something to do with v-bind="$attrs"

Thanks for pointing me in the right direction. Its about how vuejs2 handles with v-bind="$attrs". On vuejs3 this problem will be a thing of the past.

The solution would be to only add "inheritAttrs: false," to the custom-mdb-input and it solves this problem.

We can read more about that in the docs: https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance (First time I read the docs I wasnt understanding the concept of their words, now it already makes sense)

Best regards


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 6.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: No
Tags