2

I am using yii2 basic.

I have installed Admin LTE and is working.

Now I have Employee CRUD. When admin views the view of particular employee, then the details are going out of the screen horizontally i.e, there is no horizontal scrollbar to scroll the page to view the details completely.

How to accomplish this?

Questions
  • 69
  • 1
  • 12

3 Answers3

3

I was having the same issue with AdminLTE. I solved it by overriding the css of 'container-fluid' class with .container-fluid { overflow-x: scroll; }. Here is the general example:

  <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>
Daedalus Lee
  • 63
  • 10
0

If you want to enable the horizontal scrollbar to body instead of a certain div, you have to delete the code below from your adminlte.js

And set all divs before to 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());
  }
}

};

Diego P.
  • 1
0

add the following:

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

considering your yii2 grid-view class is default grid-view;

Yerke
  • 2,187
  • 3
  • 19
  • 33