html - Materialise CSS Modal 将正文内容向右移动

Question

我是这个社区的新人。

主要内容:

触发模式:

第一张图片显示了我页面的主要内容。第二张图片显示内容(时间表卡面板)向右扩展/移动。 CSS padding 和 overflow 没有解决我的问题。

我该怎么办？

这是我针对这个特定文件的完整 CSS:

<style>
    body
    {
        background-color: #f1f1f1 !important;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        padding-left: 240px;
    }
    main 
    {
        flex: 1 0 auto;
    }
    header
    {
        margin-bottom: 2% !important;
    }
    #nav-wrapper
    {
        padding-top: 0.4%;
        background-color: #1976d2 !important;
    }
    a .men
    {
        padding-top: 0.8%;
        font-size: 2.8rem;
        z-index: 0;
    }
    @media only screen and (max-width : 992px) 
    {
     body 
     {
        padding-left: 0;
     }
    }

    ul .activeTab a
    {
        background-color: #ccc !important;
    }
    ul li a:hover
    {
        background-color: #f1f1f1 !important;
    }
    .chPassHeader
    {
        font-size: 1.2rem;
    }
</style>

这是我的模态

<!-- START : CHANGE PASSWORD MODAL-->
    <div id="chPassModal" class="modal animated fadeIn">

        <div class="modal-content">
          <span class="chPassHeader"><i class="material-icons left">mode_edit</i> CHANGE PASSWORD</span>
          <div class="divider"></div>
          <p>A bunch of text</p>
        </div>

        <div class="modal-footer">
            <a class="modal-action modal-close btn-flat">Cancel</a>
        </div>
    </div>
    <!-- END : CHANGE PASSWORD MODAL-->

Answer 1

我也遇到了同样的问题。在函数 openModal 中给文件“ma​​terialize.js”中的正文宽度引起的内容偏移。

 var openModal = function($trigger) {
      var $body = $('body');
      var oldWidth = $body.innerWidth();
      $body.css('overflow', 'hidden');

      $body.width(oldWidth);

      if ($modal.hasClass('open')) {
        return;
      }

解决办法是改变

   $body.width(oldWidth)

进入

   $body.width($(window).width());