Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB Free 4.3.x: “Hidden” and “Visible” Classes No Longer Work

surface2air free asked 7 years ago


Hi MDB Support,

I have updated to the most current free version of MDB, and while there's plenty to be excited about, it also seems like I have lost the toggle states of hiding and showing content with the Bootstrap "hidden" and "visible" classes, e.g., "hidden-lg visible-sm".

The page content is reproduced to offer different layouts for larger and smaller displays depending upon the viewport size and breakpoint. The top of this sample page is designed to serve the page content to larger displays while hiding the bottom half of the page with the same content. Similarly, the top half of the page would be hidden from smartphones and smaller displays.

My DIV containers include these classes as follows:

<!--Main layout-->
        <div class="container visible-lg visible-md hidden-sm hidden-xs">
            <div class="row justify-content-center">
              <div class="col-5">
                <h6 class="small-lead">Project</h6>
                <p>
                <b>West Edge Sculpture Invitational</b>
                </p>
                <p>
                  Sponsored and supported an event which allowed local sculptors the opportunity to display their work on Downtown Seattle streets during the summer months.
                </p>
              </div>
              <div class="col-3">
                <img src="../images/projects/west-edge-sculpture-invitational.jpg" class="img-fluid" alt="" />
              </div>
            </div>
        </div>

        <div class="container hidden-lg hidden-md visible-sm visible-xs">
            <div class="row d-flex justify-content-center hidden-lg hidden-md visible-sm visible-xs">
              <div class="col-8">
                <h6 class="small-lead">Project</h6>
                <p>
                <b>West Edge Sculpture Invitational</b>
                </p>
                <p>
                  Sponsored and supported an event which allowed local sculptors the opportunity to display their work on Downtown Seattle streets during the summer months.
                </p>
                <img src="../images/projects/west-edge-sculpture-invitational.jpg" class="img-fluid" alt="" />
              </div>
            </div>
        </div>
        <!--/.Main layout-->

Please let me know what I'm missing.

Thanks!

Eric
Seattle, WA


taipan89 free answered 6 years ago


I can do this with the 'td' tags and it work the way I assumed. The 'th' tags do not do this same. Is there something I'm missing (pro version 4.3.0)

===

html

...

<th class="col d-none d-sm-table-cell m-0">Data<br>Point</th>


<?php

...

$tdvis = "d-none d-md-table-cell small p-1";
echo "<td class=\"".$tdvis."\">" . $row["DataPoint"] . "</td>";

...

?>


Bartłomiej Malanowski staff commented 6 years ago

Helpers have changed a while ago. If you're looking for the docs for MDB 4.3.0, please try this: https://mdbootstrap.com/legacy/jquery/4.3.2/?page=css/helpers


contactpetergray pro answered 7 years ago


Hey Eric, and thanks for the link Marta. I was having a similar problem as you Eric. But clicked through to "Display" which took me to this page:  ( https://mdbootstrap.com/utilities/bootstrap-display-property/ ) I was able to use the d-none and d-sm-block together as a substitute that worked for my situation. Hope that helps.

Magdalena Obalska free commented 7 years ago

@contactpetergray, thank you for your solution. Eric, let us know if your problem is solved or not.

surface2air free commented 7 years ago

Hi Magda, Marta and contactpetergray - I used the older solution that seems to work, e.g., "hidden-sm-down" for one DIV of content, and "hidden-md-up" for a second DIV of content that's offering a different layout. It's all working now. Thanks :] Eric Seattle, Washington

Marta Wierzbicka staff answered 7 years ago


Hi Eric, Have you read this topic in our documentation? You can find an answer to your question here: https://mdbootstrap.com/css/helpers/, below the title "Responsive utilities". Best, Marta

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

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No