如何在 yii2 的 Admin LTE 中创建水平滚动条？答案

【问题标题】：How to create horizontal scroll bar in Admin LTE in yii2?如何在 yii2 的 Admin LTE 中创建水平滚动条？
【发布时间】：2017-09-27 13:58:35
【问题描述】：

我正在使用 yii2 基础版。

我已经安装了 Admin LTE 并且正在工作。

现在我有员工 CRUD。当管理员查看特定员工的视图时，详细信息会水平显示在屏幕之外，即没有水平滚动条来滚动页面以完整查看详细信息。

如何做到这一点？

【问题讨论】：

标签： twitter-bootstrap-3 yii2-basic-app adminlte

【解决方案1】：

我在使用 AdminLTE 时遇到了同样的问题。我通过用.container-fluid { overflow-x: scroll; } 覆盖'container-fluid' 类的css 来解决它。这是一般的例子：

  <html>
    <head>
      <style>
        .container-fluid {
          overflow-x: scroll;
        }
      </style>
    </head>
    <body class="skin-black sidebar-mini" role="document">
      <div class="wrapper">

        <!-- AdminLTE Main Header here -->

        <!-- AdminLTE Sidebar here -->

        <!-- Content Wrapper. Contains page content -->

        <div class="content-wrapper">
          <section class="content-header">
            <h1>View Employees Header Page</h1>
            <ol class="breadcrumb">
              <li><a href="#">Home</a></li>
              <li class="active">Employees</li>
            </ol>
          </section>
          <section class="content container-fluid">

            <!-- Employees table view with horizontal scrollbar -->

          </section>
        </div>

        <!-- /.content-wrapper -->

        <!-- AdminLTE Footer here -->
      </div>
    </body>
  </html>

【讨论】：

【解决方案2】：

如果你想启用水平滚动条到body而不是某个div，你必须从你的adminlte.js中删除下面的代码

并将之前的所有 div 设置为 width:100%;

Layout.prototype.fix = function () {
// Remove overflow from .wrapper if layout-boxed exists
$(Selector.layoutBoxed + ' > ' + Selector.wrapper).css('overflow', 'hidden');

// Get window height and the wrapper height
var footerHeight  = $(Selector.mainFooter).outerHeight() || 0;
var neg           = $(Selector.mainHeader).outerHeight() + footerHeight;
var windowHeight  = $(window).height();
var sidebarHeight = $(Selector.sidebar).height() || 0;

// Set the min-height of the content and sidebar based on
// the height of the document.
if ($('body').hasClass(ClassName.fixed)) {
  $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight);
} else {
  var postSetHeight;

  if (windowHeight >= sidebarHeight) {
    $(Selector.contentWrapper).css('min-height', windowHeight - neg);
    postSetHeight = windowHeight - neg;
  } else {
    $(Selector.contentWrapper).css('min-height', sidebarHeight);
    postSetHeight = sidebarHeight;
  }

  // Fix for the control sidebar height
  var $controlSidebar = $(Selector.controlSidebar);
  if (typeof $controlSidebar !== 'undefined') {
    if ($controlSidebar.height() > postSetHeight)
      $(Selector.contentWrapper).css('min-height', $controlSidebar.height());
  }
}

};

【讨论】：

【解决方案3】：

添加以下内容：

<style>
    .grid-view {
        overflow: auto;
    }
</style>

考虑到你的 yii2 网格视图类是默认的 grid-view;

【讨论】：