the elements within a row do not have the same height.

Topic: the elements within a row do not have the same height.

yeisonvelez11 free asked 5 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.

How can I do it?

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

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear yeisonvelez11,

In your first code, to the div with .col-sm-4 class, please add the height: inherit; style and your problem will be gone.

Best Regards,

Damian

Add comment

yeisonvelez11 free answered 5 years ago

0 0 Best answer

Thank you for responding, but my question refers to how to make the divs children within a ROW have the same height. (They (divs) will usually take the height of the largest div)

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear yeisonvelez11,

Could you please check if this code fit your needs?

<!-- Container -->
<div class="white-text d-block d-md-flex">

  <!-- Column -->
  <div class="p-3 pink lighten-1 w-100">
    <button class="btn btn-primary h-100">Button</button>

  </div>
  <!-- Column -->

  <!-- Column -->
  <div class="p-3 blue lighten-1 w-100">

    <h2 class="pb-3">Column</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>

  </div>
  <!-- Column -->

  <!-- Column -->
  <div class="p-3 purple lighten-1 w-100">

    <h2 class="pb-3">Column</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>

  </div>
  <!-- Column -->

</div>
<!-- Container -->

Best Regards,

Damian

yeisonvelez11 free commented 5 years ago

this code works perfectly in the version 4.1.3 of bootstrap.

http://jsfiddle.net/e5jv1fo6/

In my project the bootstrap library is apparently the same, but I still have this problem. This piece is taken of the library of bootstrap on my project: "src/lib/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"/*! * Bootstrap v4.1.3 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.0.0
Device: web
Browser: chrome
OS: windows 10
Provided sample code: No
Provided link: No

yeisonvelez11

161Support score
25Questions 3Answers 0Snippets