MDBInput label overlaps with border box when in non-initial

Topic: MDBInput label overlaps with border box when in non-initial MDBTabContent

Riva priority asked 11 months ago

*Expected behavior*Label of MDBInput does not overlap with border when label was previously hidden

*Actual behavior*Label of MDBInput overlaps with border when label was previously hidden

Note: we were using 3.20 but reproduced this in 4.1.1

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

Click This Tab

  </MDBTabNav>
  <!-- Tabs navs -->
  <!-- Tabs content -->
  <MDBTabContent>
    <MDBTabPane tab-id="ex6-1">
      <MDBInput label="THIS LABEL OVERLAPS WITH THE BORDER"></MDBInput>
     </MDBTabPane>
  </MDBTabContent>
  <!-- Tabs content -->
</MDBTabs>

Code Snippet: https://mdbootstrap.com/snippets/vue/riva/5863848

Add comment

Bartosz Cylwik staff answered 8 months ago

0 0 Best answer

Please insert min. 20 characters.

Hi, I'm coming back to this issue, because there is a workaround for this. To make it work right now, you can add a v-if directive to the input and check whether the tab is active. Our inputs recalculate the middle notch size after every update and after mounting.

  <MDBTabs v-model="activeTabId1">
    <MDBTabNav tabsClasses="mb-3">
      <MDBTabItem tabId="ex1-1" href="ex1-1">Tab #1</MDBTabItem>
      <MDBTabItem tabId="ex1-2" href="ex1-2">Tab #2</MDBTabItem>
    </MDBTabNav>
    <MDBTabContent>
      <MDBTabPane tabId="ex1-1">Content #1</MDBTabPane>
      <MDBTabPane tabId="ex1-2"><MDBInput v-if="activeTabId1 === 'ex1-2'" label="test label"/></MDBTabPane>
    </MDBTabContent>
  </MDBTabs>

We are going to add checking whether the notch was calculated on input focus for the next release so that workaround won't be necessary.

Best Regards!

Add comment

Mateusz Trochonowicz staff answered 11 months ago