MDBootstrap Messenger Like grid

Question

I want to create a messenger like grid layout using bootstrap 4

my html is like the following

`<div class="container-fluid">
   <div class="row">
     <div class="col-md-3">here is a ul of list of contacts</div>
     <div class="col-md-9 ml-auto">msgs display here</div>
     <div class="col-md-9 fixed-bottom ml-auto">textarea here</div>
   </div> 
 </div>`

I want the msgs display here div to start from top of the page till it reaches the text area div problem is, it always has the same height like the first .col-md-3.

How do i make the height of the middle div .col-md-9 independent of the left one? And ofcourse keeping it responsive.

Cheers,

score 0 · Answer 1 · answered Oct 31 '17 at 01:45

0

I assume (because I cannot see your CSS) that you declared a height for the row div. This makes all the elements have the same height. Create an ID for each element and call them in your CSS, ex):

#msg-display-here {

  /* height goes here */

}

and your div in the html should have an ID as you have 2 classes that are the same:

<div id="msg-display-here" class="col-md-9 ml-auto">msgs display here</div>

answered Oct 31 '17 at 01:45

DannyV

220
1
6

Also please post your CSS – DannyV Oct 31 '17 at 01:46
I have no css added except for the `mdboostrap library` – user3052526 Oct 31 '17 at 01:47
Also when i define a `height` as you answered it does work, except that now it is not responsive – user3052526 Oct 31 '17 at 01:48
You're probably making the height in pixels. Make it a percentage or rem if you have a reference pixel number. Also, how are you doing this w/o CSS – DannyV Oct 31 '17 at 01:52
Will give that a shot. Upon reading your post i just inlined the height to test. There is no custom css as of yet – user3052526 Oct 31 '17 at 02:04
I gave height to both `.col-md-3` and `.col-md-9` and it worked. Thanks @DannyV i wonder why when giving the height the first time it did not work. – user3052526 Oct 31 '17 at 04:15

MDBootstrap Messenger Like grid

1 Answers1