bootstrap 4.2 is implemented in this new version?


Topic: bootstrap 4.2 is implemented in this new version?

yeisonvelez11 asked 2 years ago

I am trying to make the divs children of class .row have the same height. I am trying to make the button that is on the right (close icon), center vertically and horizontally occupying all the height that should have with respect to the div that is on the left.

this is my code:

        <div class="row mb-0 pb-0 d-flex" style="border:1px solid red;">
          <div class="col-sm-8 mb-0 pb-0" style="border:1px solid blue;">
            <div class="md-form mt-4">
              <textarea type="text" id="objetivo_especifico" class="md-textarea form-control" formControlName="objetivo_especifico"  mdbValidate  mdbInputDirective></textarea>
              <label for="objetivo_especifico">Objetivo EspecĂ­fico</label> 
            </div>
          </div>
          <div class="col-sm-4 flex-center" style="border:1px solid blue;">
            <a mdbBtn size="sm"  floating="true" class="m-0" mdbWavesEffect  mdbTooltip="Cancelar" placement="top"  class="btn-pin waves-light animated mr-8 bola_roja p-0 m-0" >
              <mdb-icon icon="close"></mdb-icon>
            </a>
          </div>
        </div>

enter image description here

but tested this same code in an earlier version of bootstrap, and it works. Why does this happen? If bootstrap is implementing this problem, it should not happen.

http://jsfiddle.net/e5jv1fo6/


Damian Gemza staff answered 2 years ago

Dear yeisonvelez11,

Yes, the Bootstrap 4.2.1 is added to the latest MDB Angular.

About your problem: please add the height: inherit style to the button, and it will occupy the 100% of available space.

Best Regards,

Damian


yeisonvelez11 commented 2 years ago

why? In bootstrap this is not necessary.


Damian Gemza staff commented 2 years ago

The MD Bootstrap styles overwrite some of the native Bootstrap styles, so maybe that's the case.

Please use the height inherit, and the problem will be gone.

Best Regards,

Damian


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: web
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes
Tags