Question

我是这个社区的新人。

主要内容：

触发模态：

第一张图显示了我页面的主要内容。第二张图片显示内容（日程卡面板）向右/向右移动。 CSS填充和溢出并没有解决我的问题。

我该怎么办？

这是我对这个特定文件的完整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

我遇到同样的问题。通过在文件中提供正文宽度而导致的内容移位＆＃34; materialize.js ＆＃34;在函数openModal中。

 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());

Answer 2

我刚刚在materialize.js文件中注释了这个$body.width(oldWidth)并且问题已经消失了。

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

2 个答案: