Scroll Bar in Sidebar of Admin LTE

IntegrityFoundation commented 5 years ago

I have Admin LTE. When I change the skin color to white of the sidebar, then I can see a thin scroll bar. But when I change the skin to blue It can't be seen. So how should I change the color of scroll bar as well as the size of it.

REJack commented 5 years ago

Which version of AdminLTE you use?

IntegrityFoundation commented 5 years ago

Admin LTE 2.3.4. It is working fine online at https://adminlte.io/themes/AdminLTE/pages/layout/fixed.html. But on my localhost it doesn't work

I am using,

<div class="slimScrollDiv">
<section class="sidebar">
</section>

<div class="slimScrollBar" style="background: grey; opacity: 0.4; border-radius: 7px;">
    </div>
    <div class="slimScrollRail" style=" border-radius: 7px; background: blue; opacity: 0.2; ">
    </div>

<script>
 $(function(){
    $('.slimScrollDiv').slimScroll({

    });
});

</script>

This causes scroll bar to display but the menus height is changing.

REJack commented 5 years ago

Did you added the class fixed to the body?

IntegrityFoundation commented 5 years ago

Yes.

<body class="skin-blue fixed sidebar-mini">

REJack commented 5 years ago

Can you provide a complete html example?

IntegrityFoundation commented 5 years ago

Ok.

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use app\assets\DashboardAsset;
use app\models\Employee;
use app\models\AuthAssignment;

DashboardAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="@web/plugins/slimScroll/jquery.slimscroll.min.js"></script>

<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />

  <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body class="skin-blue fixed sidebar-mini">
<?php $this->beginBody() ?>
<div class="wrapper">
<header class="main-header">
    <!-- Logo -->
    <a href="#" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->

      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg">Integrity Foundation</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->

          <!-- Notifications: style can be found in dropdown.less -->

          <!-- Tasks: style can be found in dropdown.less -->

          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <?= Html::img('@web/uploadedimages/'.\Yii::$app->user->identity->Photo, ['class'=>"user-image", 'alt'=>"User Image"]) ?>

              <span class="hidden-xs"><?php echo \Yii::$app->user->identity->fullname;?></span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <?= Html::img('@web/uploadedimages/'.\Yii::$app->user->identity->Photo, ['class'=>"user-image", 'alt'=>"User Image"]) ?>

                <p>
                  <?php echo \Yii::$app->user->identity->fullname." - ";?>
                  <?php

                    $emp = Employee::findOne(\Yii::$app->user->identity->id);

                    $empjob= $emp->employeejobs;

                    foreach($empjob as $empjobs)
                    {

                        //$empjobs['Job_Title'];

                    }
                    echo $empjobs['Job_Title'];

                ?>
                  <?php

                    $role = Employee::findOne(\Yii::$app->user->identity->id);

                    $roles= $role->authAssignments;

                    foreach($roles as $roles1)
                    {

                        //echo $roles1['item_name'];

                    }
                    //echo $roles1['item_name'];

                  ?>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">

                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">

                <div class="pull-right">
                  <?= Html::a(
                                    'Log out',
                                    ['/site/logout'],
                                    ['data-method' => 'post', 'class' => 'btn btn-default btn-flat']
                                ) ?>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->

        </ul>
      </div>
    </nav>
  </header>

  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->

    <div class="slimScrollDiv">
    <section class="sidebar">

      <!-- Sidebar user panel -->

      <!-- sidebar menu: : style can be found in sidebar.less -->
      <?php
      if(\Yii::$app->user->can('admin'))
      {
      ?>
      <ul class="sidebar-menu">

        <li class="active treeview">

          <a href="index.php?r=dashboard/index"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>

        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>Masters</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=church"><i class="fa fa-circle-o"></i> Church</a></li>
            <li><a href="index.php?r=courses"><i class="fa fa-circle-o"></i> Courses</a></li>
            <li><a href="index.php?r=district"><i class="fa fa-circle-o"></i> District</a></li>
            <li><a href="index.php?r=taluka"><i class="fa fa-circle-o"></i> Taluka</a></li>
            <li><a href="index.php?r=village"><i class="fa fa-circle-o"></i> Village</a></li>
            <li><a href="index.php?r=location"><i class="fa fa-circle-o"></i> Locations</a></li>
            <li><a href="index.php?r=area"><i class="fa fa-circle-o"></i> Areas</a></li>
          </ul>
        </li>

         <li><a href="index.php?r=auth-assignment">Role Assignments</a></li>

         <li><a href="index.php?r=churchassignment">Church Assignments</a></li>

        <li><a href="index.php?r=employee"><i class="glyphicon glyphicon-user"></i>Employee</a></li>

        <li><a href="index.php?r=employeetraining"> <span class="glyphicons glyphicons-user">Employee Training</span></a></li>

         <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>SHG</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=groupdetails"><i class="fa fa-circle-o"></i>SHG Profile</a></li>

            <li><a href="index.php?r=groupsavingdetails"><i class="fa fa-circle-o"></i> Group Saving Details</a></li>

          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>Survey</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=regiondata"><i class="fa fa-circle-o"></i> Region Data</a></li>
            <li><a href="index.php?r=persondata"><i class="fa fa-circle-o"></i> Survey</a></li>

          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>Pastoral Networking</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=pastor"><i class="fa fa-circle-o"></i>Pastors Details</a></li>

          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>LWF</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
             <li><a href="index.php?r=members"><i class="fa fa-circle-o"></i> Member Details</a></li>
             <li><a href="index.php?r=offering"><i class="fa fa-circle-o"></i> Offering Details</a></li>
                <li><a href="index.php?r=activities"><i class="fa fa-circle-o"></i> Activities Details</a></li>

          </ul>
        </li>

        <li><a href="index.php?r=dailytaskreport"> <span class="glyphicons glyphicons-user">Daily Task Reports</span></a></li>

                <li><a href="index.php?r=weeklymeetingreport"> <span class="glyphicons glyphicons-user">Weekly Meeting Reports</span></a></li>
                <li><a href="index.php?r=weeklymeetingreport"> <span class="glyphicons glyphicons-user">Weekly Meeting Reports</span></a></li>

      </ul>

      <?php
      }
      elseif(\Yii::$app->user->can('fieldofficer'))
      {

      ?>
      <ul class="sidebar-menu">

        <li class="active treeview">
          <a href="index.php?r=dashboard"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>
        </li>

         <li>
         <?php
         $id= \Yii::$app->user->identity->id;
         echo "<a href='index.php?r=employee%2Fview&id=$id'><i class='glyphicon glyphicon-user'></i>My Profile</a></li>";

         ?>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>SHG</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=groupdetails"><i class="fa fa-circle-o"></i>SHG Profile</a></li>

            <li><a href="index.php?r=groupsavingdetails"><i class="fa fa-circle-o"></i> Group Saving Details</a></li>

          </ul>
        </li>

      </ul>
      <?php
      }

      ?>

    </section>
    <div class="slimScrollBar" style="background: grey; opacity: 0.4; border-radius: 7px;">
    </div>
    <div class="slimScrollRail" style=" border-radius: 7px; background: blue; opacity: 0.2; ">
    </div>

</div>

    <!-- /.sidebar -->
  </aside>

    <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">

      <!--<?php echo \Yii::$app->user->identity->FirstName; ?>!-->
    </section>

    <!-- Main content -->

    <section class="content">

        <?=$content ?>

    </section>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
<script>
 $(function(){
    $('.slimScrollDiv').slimScroll({

    });
});

</script>

REJack commented 5 years ago

Try to remove this:

 $(function(){
    $('.slimScrollDiv').slimScroll({

    });
});

IntegrityFoundation commented 5 years ago

After removing, still it doesnt appear

REJack commented 5 years ago

Where you load the adminlte.js or adminlte.min.js? I can't find it.

IntegrityFoundation commented 5 years ago

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use app\assets\DashboardAsset;
use app\models\Employee;
use app\models\AuthAssignment;

DashboardAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

  <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wrapper">
<?php $this->beginBody() ?>
<div class="wrapper">
<header class="main-header">
    <!-- Logo -->
    <a href="#" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->

      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg">Integrity Foundation</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->

          <!-- Notifications: style can be found in dropdown.less -->

          <!-- Tasks: style can be found in dropdown.less -->

          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <?= Html::img('@web/uploadedimages/'.\Yii::$app->user->identity->Photo, ['class'=>"user-image", 'alt'=>"User Image"]) ?>

              <span class="hidden-xs"><?php echo \Yii::$app->user->identity->fullname;?></span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <?= Html::img('@web/uploadedimages/'.\Yii::$app->user->identity->Photo, ['class'=>"user-image", 'alt'=>"User Image"]) ?>

                <p>
                  <?php echo \Yii::$app->user->identity->fullname." - ";?>
                  <?php

                    $emp = Employee::findOne(\Yii::$app->user->identity->id);

                    $empjob= $emp->employeejobs;

                    foreach($empjob as $empjobs)
                    {

                        //$empjobs['Job_Title'];

                    }
                    echo $empjobs['Job_Title'];

                ?>
                  <?php

                    $role = Employee::findOne(\Yii::$app->user->identity->id);

                    $roles= $role->authAssignments;

                    foreach($roles as $roles1)
                    {

                        //echo $roles1['item_name'];

                    }
                    //echo $roles1['item_name'];

                  ?>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">

                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">

                <div class="pull-right">
                  <?= Html::a(
                                    'Log out',
                                    ['/site/logout'],
                                    ['data-method' => 'post', 'class' => 'btn btn-default btn-flat']
                                ) ?>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->

        </ul>
      </div>
    </nav>
  </header>

  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->

    <section class="sidebar">

      <!-- Sidebar user panel -->

      <!-- sidebar menu: : style can be found in sidebar.less -->
      <?php
      if(\Yii::$app->user->can('admin'))
      {
      ?>
      <ul class="sidebar-menu">

        <li class="active treeview">

          <a href="index.php?r=dashboard/index"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>

        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>Masters</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=church"><i class="fa fa-circle-o"></i> Church</a></li>
            <li><a href="index.php?r=courses"><i class="fa fa-circle-o"></i> Courses</a></li>
            <li><a href="index.php?r=district"><i class="fa fa-circle-o"></i> District</a></li>
            <li><a href="index.php?r=taluka"><i class="fa fa-circle-o"></i> Taluka</a></li>
            <li><a href="index.php?r=village"><i class="fa fa-circle-o"></i> Village</a></li>
            <li><a href="index.php?r=location"><i class="fa fa-circle-o"></i> Locations</a></li>
            <li><a href="index.php?r=area"><i class="fa fa-circle-o"></i> Areas</a></li>
          </ul>
        </li>

         <li><a href="index.php?r=auth-assignment">Role Assignments</a></li>

         <li><a href="index.php?r=churchassignment">Church Assignments</a></li>

        <li><a href="index.php?r=employee"><i class="glyphicon glyphicon-user"></i>Employee</a></li>

        <li><a href="index.php?r=employeetraining"> <span class="glyphicons glyphicons-user">Employee Training</span></a></li>

         <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>SHG</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=groupdetails"><i class="fa fa-circle-o"></i>SHG Profile</a></li>

            <li><a href="index.php?r=groupsavingdetails"><i class="fa fa-circle-o"></i> Group Saving Details</a></li>

          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>Survey</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=regiondata"><i class="fa fa-circle-o"></i> Region Data</a></li>
            <li><a href="index.php?r=persondata"><i class="fa fa-circle-o"></i> Survey</a></li>

          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>Pastoral Networking</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=pastor"><i class="fa fa-circle-o"></i>Pastors Details</a></li>

          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>LWF</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
             <li><a href="index.php?r=members"><i class="fa fa-circle-o"></i> Member Details</a></li>
             <li><a href="index.php?r=offering"><i class="fa fa-circle-o"></i> Offering Details</a></li>
                <li><a href="index.php?r=activities"><i class="fa fa-circle-o"></i> Activities Details</a></li>

          </ul>
        </li>

        <li><a href="index.php?r=dailytaskreport"> <span class="glyphicons glyphicons-user">Daily Task Reports</span></a></li>

                <li><a href="index.php?r=weeklymeetingreport"> <span class="glyphicons glyphicons-user">Weekly Meeting Reports</span></a></li>
                <li><a href="index.php?r=weeklymeetingreport"> <span class="glyphicons glyphicons-user">Weekly Meeting Reports</span></a></li>

      </ul>

      <?php
      }
      elseif(\Yii::$app->user->can('fieldofficer'))
      {

      ?>
      <ul class="sidebar-menu">

        <li class="active treeview">
          <a href="index.php?r=dashboard"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>
        </li>

         <li>
         <?php
         $id= \Yii::$app->user->identity->id;
         echo "<a href='index.php?r=employee%2Fview&id=$id'><i class='glyphicon glyphicon-user'></i>My Profile</a></li>";

         ?>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>SHG</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?r=groupdetails"><i class="fa fa-circle-o"></i>SHG Profile</a></li>

            <li><a href="index.php?r=groupsavingdetails"><i class="fa fa-circle-o"></i> Group Saving Details</a></li>

          </ul>
        </li>

      </ul>
      <?php
      }

      ?>

    </section>

    <!-- /.sidebar -->
  </aside>

    <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">

      <!--<?php echo \Yii::$app->user->identity->FirstName; ?>!-->
    </section>

    <!-- Main content -->

    <section class="content">

        <?=$content ?>

    </section>

</div>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
<script src="plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/adminlte.min.js"></script>

I just now added. But still scroll bar does not appear

IntegrityFoundation commented 5 years ago

Hi,

The scroll bar is getting displayed. But now on the sidebar I have menus where it contains sub-menus. Now it is not showing me the submenus. Some features are not functioning properly such as contents which are shown using Tab structure.

REJack commented 5 years ago

You missed the data-widget="tree" on ul.sidebar-menu

IntegrityFoundation commented 5 years ago

If I add,

<ul class="sidebar-menu" data-widget="tree">

still the menus cant show submenus

IntegrityFoundation commented 5 years ago

Hi, On my localhost it is working fine. But on localhost the first menu Dashboard is not working.

On my domain where I have hosted the application, scroll bar is displayed but sometimes menus can't show the submenus and some times the Dashboard is not working.

There is a file app.min.js If I dont include it, then scroll bar is not displayed but other functioning is normal. But If include the file, then scroll bar is displayed but menus don't show the submenus.

REJack commented 5 years ago

Try to update AdminLTE to v2.4.12, the structure of your html looks good and it should work.

REJack commented 5 years ago

Your HTML markup is not correct, you doesn't need the slimscroll div's (e.g. slimScrollDiv, slimScrollBar, slimScrollRail) try to remove these div's.

IntegrityFoundation commented 5 years ago

The issue has been resolved.

ColorlibHQ / AdminLTE

Scroll Bar in Sidebar of Admin LTE #2134