Topic: Input group helper/counter support

okaeri pro asked 10 months ago


Expected behavior

Helper and counter works with inputGroup. Label works with at least some input groups.

Actual behavior

The input group breaks completely or misbehaves (e.g. no helper styling). I also would expect that label works, at least in the case where the button/dropdown is on the right and left side is empty.

Resources (screenshots, code snippets etc.)

           <MDBInput
              inputGroup counter :maxlength="32" /*label="Hi!"*/
              :formOutline="false"
              v-model="input28"
              aria-label="Text input with dropdown button"
              helper="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae, dolorum ducimus hic in laudantium, maxime minima, nam natus necessitatibus non perferendis qui quo sequi tempora tempore totam ullam voluptatum!"
          >
            <MDBDropdown v-model="dropdown2">
              <MDBDropdownToggle @click="dropdown2 = !dropdown2">Dropdown</MDBDropdownToggle>
              <MDBDropdownMenu>
                <MDBDropdownItem href="#">Action</MDBDropdownItem>
                <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                <MDBDropdownItem divider/>
                <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBInput>

enter image description here enter image description here

 <MDBInput
              inputGroup counter :maxlength="32"
              :formOutline="false"
              v-model="input1"
              aria-describedby="basic-addon1"
              aria-label="Username"
              placeholder="Username"
              helper="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae, dolorum ducimus hic in laudantium, maxime minima, nam natus necessitatibus non perferendis qui quo sequi tempora tempore totam ullam voluptatum!"
          >
            <template #prepend>
              <span class="input-group-text" id="basic-addon1">@</span>
            </template>

enter image description here


okaeri pro commented 10 months ago

Looks like `label` can work with dropdown input group, but only when there is no counter nor helper and `:formOutline="true"`.


Mikołaj Smoleński staff answered 10 months ago


Hello @okaeri

Input group is a specific, quite flexible type of form, in which, unfortunately, it is not possible to universally make a text helper or a counter. However, in your case I suggest the following solution:

  <MDBInput
    inputGroup
    :formOutline="false"
    v-model="input27"
    aria-label="Text input with dropdown button"
  >
    <template v-slot:prepend>
      <MDBDropdown v-model="dropdown1">
        <MDBDropdownToggle @click="dropdown1 = !dropdown1"
          >Dropdown</MDBDropdownToggle
        >
        <MDBDropdownMenu>
          <MDBDropdownItem href="#">Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
          <MDBDropdownItem href="#"
            >Something else here</MDBDropdownItem
          >
          <MDBDropdownItem divider />
          <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
    </template>
  </MDBInput>
  <div class="custom-form-helper">Custom form helper</div>

<style scoped>
.custom-form-helper {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: left;
  font-size: 0.875em;
  color: #757575;
}
</style>

Keep coding,  Mikołaj from MDB



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: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.9.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No