I thought pasting just the relevant sections might be useful but I guess it doesn't work. Sorry for that. Here's the full html page: https://gist.github.com/mensoh/2d1d78f7fddb4ef5b8ab618306c98693

here when you click on a user in the table you should get a modal that has tabs on the top, when clicking statistics you get new tabs at the bottom of the model: the jsvectormap (most right option) does not render.

Thanks

Hi,

when I open your code, in the live preview I see only this:

I don't see any button to open a modal and any tabs. Are you sure you've sent me a fully working code?

Best, Marta

Hi,

I can't reproduce the problem with the code you pasted above. Would you create a correct formatted code in the snippet here: https://mdbootstrap.com/snippets/?

Best, Marta

That worked, thanks! Is there something additional I need to do to make the map show up in a modal? E.g. I have a tabbed modal (with tabs on one of the tabs) and the chart doesn't show up there despite applying the styles.

` Settings Statistics

    <!-- Tab panels -->
    <div class="tab-content">

      <!-- Panel 1 -->
      <div class="tab-pane fade in show active" id="panel1" role="tabpanel">

        <!-- Body -->
        <div class="modal-body mb-1">
          <div class="md-form form-inline">
            <table class="table table-borderless">
              <tbody>
                <tr>
                  <td style="width: 25%" class="align-middle">First name:</td>
                  <td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="firstname" id="firstname" value=""></td>
                </tr>
                <tr>
                  <td style="width: 25%" class="align-middle">Last name:</td>
                  <td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="lastname" id="lastname" value=""></td>
                </tr>
                <tr>
                  <td style="width: 25%" class="align-middle">E-mail address: </td>
                  <td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="email" id="email" value=""></td>
                </tr>
                <tr>
                  <td style="width: 25%" class="align-middle">Activation code:</td>
                  <td class="align-bottom"><span class="activation-code"></span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- Footer -->
          <div class="modal-footer display-footer">
            <button type="button" class="btn btn-secondary btn-rounded waves-effect waves-light">Save Changes</button>
            <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
      <!-- Panel 1 -->

      <!--Panel 2-->
      <div class="tab-pane fade" id="panel2" role="tabpanel">

        <!-- Body -->
        <div class="modal-body">
         <div class="view view-cascade gradient-card-header blue-gradient">
          <div class="tab-content pt-5" id="graphTabs">
            <div class="tab-pane fade active show" id="blocked-sites" role="tabpanel" aria-labelledby="blocked-sites-tab">
              <canvas id="blockedChart" height="175"></canvas>
            </div>
            <div class="tab-pane fade" id="traffic" role="tabpanel" aria-labelledby="traffic-tab">
              <canvas id="trafficChart" height="175"></canvas>
            </div>
            <div class="tab-pane fade" id="map" role="tabpanel" aria-labelledby="map-tab">
              <div class="container-fluid">
                <div id="world-map" style="width:100%;height:395px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <ul class="nav nav-tabs md-tabs" id="myBlockedSites" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="blocked-sites-tab" data-toggle="tab" href="#blocked-sites" role="tab" aria-controls="blocked-sites" aria-selected="true">Blocked Sites</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="traffic-tab" data-toggle="tab" href="#traffic" role="tab" aria-controls="traffic" aria-selected="false">Traffic</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="map-tab" data-toggle="tab" href="#map" role="tab" aria-controls="map" aria-selected="false">Devices around the globe</a>
            </li>
          </ul>
        </div>
        </div>
        <!-- Footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- Panel 2 -->
    </div>
  </div>
</div>

`

Hi,

add this CSS code to your styles:

.tab-content > .tab-pane:not(.active) { display: block; height: 0; overflow-y: hidden; }

Best, Marta