Input group helper/counter support

Topic: Input group helper/counter support

okaeri pro asked 2 years 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

 <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 2 years ago

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

Add comment

Mikołaj Smoleński staff answered 2 years ago

0 0 Best answer

<p>Hello <a href="/profile/?id=49719" target="_blank" rel="nofollow">@okaeri</a></p>

<p>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:</p>

<pre class="prettyprint"><code>  <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>
</code></pre>

<hr>

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

<p>Keep coding, 
Mikołaj from MDB    </p>

Please insert min. 20 characters.

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

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: 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

okaeri

Pro User 35Support score
7Questions 0Answers 0Snippets