MDBInput fills the whole width and causes overflow

Topic: MDBInput fills the whole width and causes overflow

afshinshahpari@gmail.com free asked 4 years ago

First of all I cant upgrade to v4.19 as it causes error that I opened another ticket for that and I had to stick to this version.

when I use MDBInput and two buttons in same container , MDBInput causes the buttons and input field to show all in separate rows and there is no way to adjust the width by using sm=xx or width=xx.

here is the sample code:

<MDBRow sm="12" className=" m-0 p-0 ">
    <MDBCol sm="12" className=" m-0 p-0 ">
        <MDBBtn
        sm="3" onClick={() => this.HandleDecrement(RowCard.Id)} className="MinusPlusButton m-0 p-0">
        -
        </MDBBtn>
    <MDBInput className="QuantityField" name="quantity" value="1.1" onChange={() => console.log(this.value)} step="0.01" />
             <MDBBtn sm="3" onClick={() => this.HandleIncrement(RowCard.Id)}  className="MinusPlusButton  m-0 p-0" >
         +
     </MDBBtn>
     </MDBCol>
</MDBRow>

Add comment

Aliaksandr Andrasiuk staff answered 4 years ago

0 0 Best answer

Hi,

Thank you <a href="https://mdbootstrap.com/user/christian_aichner/" target="_blank">Christian Aichner</a> for the great solution :)

Also, you can modify <code>MDBCol</code> in a next way:

<pre class="prettyprint"><code> <MDBRow sm='12' className=' m-0 p-0 '>
 <MDBCol sm='12' className='m-0 p-0 d-flex align-items-center justify-content-center'>
 <MDBBtn size='lg' className=' '>
 -
 </MDBBtn>
 <MDBInput
 className='QuantityField'
 name='quantity'
 value='1.1'
 onChange={() => console.log(this.value)}
 step='0.01'
 />
 <MDBBtn size='lg' className=' '>
 +
 </MDBBtn>
 </MDBCol>
 </MDBRow>
</code></pre>

You can choose one of these approaches. Personally, I prefer <a href="https://mdbootstrap.com/user/christian_aichner/" target="_blank">Christian's Aichner</a> one, because you can control the width of each button's and input's container separately.

Best regards.

Please insert min. 20 characters.

Hi,

Thank you Christian Aichner for the great solution :)

Also, you can modify MDBCol in a next way:

  <MDBRow sm='12' className=' m-0 p-0 '>
    <MDBCol sm='12' className='m-0 p-0 d-flex align-items-center justify-content-center'>
      <MDBBtn size='lg' className=' '>
        -
      </MDBBtn>
      <MDBInput
        className='QuantityField'
        name='quantity'
        value='1.1'
        onChange={() => console.log(this.value)}
        step='0.01'
      />
      <MDBBtn size='lg' className='  '>
        +
      </MDBBtn>
    </MDBCol>
  </MDBRow>

You can choose one of these approaches. Personally, I prefer Christian's Aichner one, because you can control the width of each button's and input's container separately.

Best regards.

Add comment

Christian Aichner pro answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi!

Do I understand your situation correctly, that you want the two buttons and the input in one row like this:

enter image description here

This would be achieved by this code:

<MDBRow>
    <MDBCol md="auto">
        <MDBBtn
        floating
        className=" m-0 p-0">
        -
        </MDBBtn>
    </MDBCol>
    <MDBCol>
        <MDBInput className="my-0" name="quantity" value="1.1" step="0.01" />
    </MDBCol>
    <MDBCol md="auto">
        <MDBBtn floating className="  m-0 p-0" >
            +
        </MDBBtn>
    </MDBCol>
</MDBRow>

Best regards, Chris

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: Free
Premium support: No
Technology: MDB React
MDB Version: 4.18.1
Device: mac
Browser: chrome
OS: macos
Provided sample code: No
Provided link: No

afshinshahpari@gmail.com

100Support score
16Questions 2Answers 1Snippets