Grid with differing row heights


Topic: Grid with differing row heights

BeldenSpartan asked 3 years ago

After building three charts, I'd like to display them in a grid pattern. The grid would be chart 1 in the left column, and charts 2 and 3 in the right column. I'd like charts 2 and 3 to each be half the size as chart 1, so that they all appear in the same row. Is there a way to ensure restrict row heights within a grid to handle my chart sizing? Here is the code I'm using, but the results are chart 1 and 2 appear to be in the same row and chart 3 appears to be in a new row, under chart 2:

<div class = "row g-3">
            <div class="col-md-6">
                <div class="p-0">
                    <div id='chart1' class="chart"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="pb-3">
                   <div id='chart2' class="chart"></div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id='chart3' class="chart"></div>
                    </div>
                </div>
            </div>
        </div>

Dawid Wajszczuk staff answered 3 years ago

Hi,

Due to how charts are rendered, I think it would be hard to achieve. I would suggest trying inline styles for charts to change their width and height. Here in the snippet I have used height property of chart (which is not supposed to be used, but it gave me the best result so far): https://mdbootstrap.com/snippets/standard/d-wajszczuk/3275000#html-tab-view.

Keep coding,
Dawid


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No