Search code examples
csstabsmaterialize

Adjust tabs to have same height as the tallest tab in Materialize.css

When using tabs in Materialize CSS, each tab is as tall as its content.

Info tab Info tab

Feedback tab Feedback tab

What do I do to make all tabs as tall as the tallest tab?

I know I can set a minimum height for the divs, but what I am really interested is to know if I can do it with a materialize helper or a materialize class.

HTML:

<div class="container">
    <div class="row card hoverable">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s3"><a class="active" href="#test1">Info</a></li>
                <li class="tab col s3"><a href="#test2">Feedback</a></li>
                <li class="tab col s3 disabled"><a href="#test3">QA</a></li>
            </ul>
        </div>
        <div id="test1" class="col s12">
            <div class="row">
                <div class="col">
                    <h5>Location</h5>
                    <p>Lorem ipsum dolor sit amet</p>
                    <p>consectetur adipiscing elit</p>
                    <p>Cras vestibulum</p>
                </div>
                <div class="col push-s1">
                    <h5>Available Timings</h5>
                    <p>Mon: 8AM - 9PM</p>
                    <p>Tue: 8AM - 9PM</p>
                    <p>Thu: 8AM - 9PM</p>
                    <p>Sat: 10AM - 2PM</p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <strong>ID:</strong> ABBS1243xA
                </div>
            </div>
        </div>
        <div id="test2" class="col s12">
            <ul>
                <li>Sorry, no feedback available at this time.</li>
            </ul>
        </div>
        <div id="test3" class="col s12">Test 3</div>
    </div>
</div>

I have a codepen here.

Solution

  • add this in your java-script

    $(".tabs-content").css('height','1000px');

    "tabs-content" is generated by materialize java script. Here I address that class using my java-script. 1000px can vary according to your need.

    Hope this helps.