search

mdbootstrap / adminlte-laravel

A Laravel 5 package that switchs default Laravel scaffolding/boilerplate to AdminLTE template and Pratt Landing Page with Bootstrap 3.0
MIT License
1.81k stars 508 forks source link

after copy paste N pairs of multilevel menu in sidebar, when scroll down , the main header can't stay top #219

Closed kingofswing closed 7 years ago

kingofswing commented 7 years ago

Detailed description

For admin purpose , I may want to keep the main header part stay on top. but after I put some test menus in sidebar. the right side content's height enlarge accordingly. because normally background admin panel is where we manage some back admin tasks, so we may hope the right content area equals to screen-height - mainheader-height -footer-height . or the second choice, when the right content expands , while scrolling in right content area it should not make the left sidebar scroll too. but now after put some menus in left sidebar , when scroll in left sidebar or right content area, all scroll up and main-header disappears. so can we get this effect :

https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#component-info-box

scolling mouse in left / right area doesn't effect the other one ?

another problem is clicking the left sidebar menu, the status of current choice is not kept.

Your environment

mac os x 10.11.4

clebersa commented 7 years ago

Hello @kingofswing,

Let me try to help you. If I understood right, you want to make the sidebar and the top navigation fixed, so they do not scroll when you scroll the content part, right? You can achieve that by adding the fixed class to the body tag in the ./resources/views/vendor/adminlte/layouts/app.blade.php. Additionally, you also should add the jQuery slimScroll plugin to the application so the sidebar can scroll when the menu list does not fit in the screen.

About keeping the active menu in the sidebar, there are some solutions for that on the internet if you google it. The one I chose for my project is to set that based in my route. Each menu is directly related to a route. So, when I render the page, I check the route and add the active class to the li element dinamically, for example:

<li class="{{ Request::is('home') ? 'active' : '' }}">
    <a href="{{url('home') }}"><i class='fa fa-dashboard'></i> <span>{{ trans('menu.home') }}</span></a>
</li>

Let us know if that works for you! Good luck!

kingofswing commented 7 years ago

Hi Mr. @clebersa 👍 do as you suggested, I add <body class="skin-blue sidebar-mini fixed"> in the body tag. and in script.blade.php appended <!-- sidebar slim scroll --> <script type="text/javascript"> jQuery(document).ready(function ($) { $("#my-main-sidebar").slimScroll({ color: '#fff', height: 'px' }); }); </script>

then add an ID my-main-sidebar to <aside id="my-main-sidebar" class="main-sidebar">

in sidebar.blade.php. unfortunately after expanding all the dropdown submenu (now sidebar's height > screen's height ) and scrolling the mouse inside the sidebar area there is no effect ,but in the mean time if the right content area has more contents there, scrolling in left sidebar make the right content area scrooling but not the left sidebar itself (and now in the right side there is a new scroll bar which occupy a small width of mainheader and footer,apparently it is not a slimscroll bar , which never occupy DIV area, it should appear when hovering at the right side of a DIV).

Did I do wrong ? Thanks you.

kingofswing commented 7 years ago

@clebersa

finally I put a style in section sidebar. then after sidebar's height exceeds the visible area. It seems work fine . any other good ideas? thanks again for your quick answer.

<section class="sidebar" style="height: calc(100vh - 65px); overflow-y: scroll; overflow-x: hidden; " >

clebersa commented 7 years ago

Hi @kingofswing,

What you did seems a lot of work for accomplishing that. I got that working with less code than that. I did not add any additional CSS, JavaScript or HTML besides adding the fixed class to the body tag and importing the js in the application. When I said "Additionally, you also should add the jQuery slimScroll plugin to the application so the sidebar can scroll when the menu list does not fit in the screen.", I meant you should import the js file into the resources/views/vendor/adminlte/layouts/partials/scripts.blade.php like this:

<script type="text/javascript" src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script>

I manually copied the jquery.slimscroll.min.js into the public/js folder because I was not managing the resources/plugins in my project using npm yet. However, I am working on that now and that line may change soon. Anyway, the idea is the same: Importing the js file into resources/views/vendor/adminlte/layouts/partials/scripts.blade.php file as I showed should be enough to get what you want working. No need for any additional CSS, JavaScript or HTML.

I hope this helps you.

Good luck!

kingofswing commented 7 years ago

Hi Mr. @clebersa , Do as the steps you suggested but unfortunately with no luck :-( , In file : esources/views/vendor/adminlte/layouts/partials/scripts.blade.php

add <script type="text/javascript" src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script> just below :

<script src="{{ mix('/js/app.js') }}" type="text/javascript"></script> and manually copied the jquery.slimscroll.min.js into the public/js folder.

then reload the page. expand(collapse) the sidebar and scroll mouse above this area, but still no effect.and one thing to notice is that if I click one of item of sidebar, content of this link in the right area exceeds the height of content section, when I scroll the mouse above the sidebar area, just can make the right content area to scroll not the sidebar area itself (after I click that link, then expand(collapse) the sidebar again) .

again , many thanks for your kind help. and feel sorry for my descriptions of the problem in English.

clebersa commented 7 years ago

Hi @kingofswing,

I am sorry if you could not get it working yet. Did you see if any error is thrown in the console?

As I told you, I am working on updating my project and that involves how my resources are managed. When I first created my project (end of January this year) and I implemented this scrolling, my project was using the version 5.3 of laravel. At that time, it worked fine.

Yesterday I updated my project and now laravel version is 5.4. Then I got problems. From my old version to the new one, the public/js/app.js was changed, and now I can not get the scroll of the sidebar working anymore. In the console, I get an error saying that the "jQuery variable is not defined". After some inspection, I found out that the jQuery is being exported with a name like jQuery + <random number>, like jQuery63121654321 and that causes the error once slimscroll is not able to find it as the script is expecting a variable with name jQuery only.

As it was late at night, I could not find a solution to my problem yet, but I will work on that later today. If I have any progress, I will let you know. However, I would like you to answer my question to see if we are getting the same problem or different ones.

Let me know if you get it working before I do.

Bye.

kingofswing commented 7 years ago

Hi. Mr. @clebersa There are 2 errors, pls see attached file .

2017-03-24 9 05 51
clebersa commented 7 years ago

Hi @kingofswing,

That is the same error I got. So, we are on the same boat.

I am still working on that problem. I will let you know if I have any progress.

Have a good day.

clebersa commented 7 years ago

Hi @kingofswing,

I solved the problem. I show below 2 ways to fix it. I recommend the second one.

Quick Way

Inside your project folder, run npm install and npm run dev. This will update the app.js and the jQuery variable will be available for the jquery-slimscroll plugin. The plugin script should be imported like I mentioned at https://github.com/acacha/adminlte-laravel/issues/219#issuecomment-288457999.

Fixing with Webpack

This is a more complete way to fix it. It works around Webpack, available by default in the project.

Remember that you should add the fixed class to the body tag of your application. If you do not find the file resources/views/vendor/adminlte/layouts/app.blade.php, you will need to run php artisan vendor:publish --tag=adminlte --force before the steps I described above. In case you do it after the steps, go through the steps again to make sure everything is right.

Currently, after running npm run dev, I am getting the problem described at https://github.com/acacha/adminlte-laravel/issues/199 because some files are replaced in the process. You might get the same. I will try to fix that and submit a pull request later.

Let me know if you got your project working. Good luck!

clebersa commented 7 years ago

Hi @kingofswing,

Did you get your project working? Tell me what you got so I can try to help you with some other action or @acacha can close the issue.

About my problem with the not found resources, I solved it last weekend. You can check the details here: https://github.com/acacha/adminlte-laravel/issues/199#issuecomment-289573075.

Good luck. Bye.

kingofswing commented 7 years ago

Hi , again feel sorry to not to test your method right after your reply. First I tried to test with the webpack way, but has some errors when run npm install and npm run dev. so upgrade the node and npm, after upgrading (and also rebinding of node to the neweat version), there is no error this time after the two commands. and after all, in console there is still errors , and sidebar menu scrolling didn't work , among of the attached two pics, the first one is after adding the following line in scripts.blade.php. <script type="text/javascript" src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script> , then second one is the error in console after commenting out the above line. also I copied the jquery.slimscroll.min.js file to the public\js folder.

anothter is (say my project name is myproj) after the above procedures. the email textbox of login page would not appear (only a password textbox, Chrome says it now safe after browsing through 58xs9d33.ngrok.io), but it's okay when browsing through locally using myproj.dev. can't find how to make the login box works as it used to be when using 58xs9d33.ngrok.io. should I add the dynamic domain to the trusted sites into the Chrome settings?

Any way , Thanks for your kind help these days . if you have other suggestion and this issue will be still alive, pls let me know , I will try .

2017-03-28 12 28 43 2017-03-28 12 29 31 2017-03-28 12 44 11
kingofswing commented 7 years ago

Hi, Mr. Clebersa .

thanks for your hard work.

After supper, I reopened the project , found the sidebar slimscrolling works! although I mentioned this morning that there is no email box textbox in login page, I checked login.blade.php and found that the field was commented out by some {{-- --}}, so strange:

{{--<div class="form-group has-feedback">--}} {{--<input type="email" class="form-control" placeholder="{{trans('adminlte_lang::message.email') }}" name="email"/>--}} {{--<span class="glyphicon glyphicon-envelope form-control-feedback"></span>--}} {{--</div>--}}.

Anyway it woks at admin panel, all the red errors gone(except Vue ones ), and I didn't add <script type="text/javascript" src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script> in the scripts.blade.php file. But now when logout, New errors arose :

2017-03-28 7 11 52

I send some outputs of relative npm commands to your gmail.com, 'cause it is not appropriate to paste them here。

...continued, desides the above 'error' I found a new 'bug' : the remember me check changed, so I checked to find that we must also add the following line to scripts_auth.blade.php ,which Mr. @clebersa had not mentioned .

<!-- <script src="{{ asset('/js/app.js') }}"></script> -->>

<script src="{{ URL::to('/') . mix('/js/manifest.js') }}" type="text/javascript"></script> <script src="{{ URL::to('/') . mix('/js/vendor.js') }}" type="text/javascript"></script> <script src="{{ URL::to('/') . mix('/js/app.js') }}" type="text/javascript"></script> So the above commented out of <div class="form-group has-feedback"> should still be kept commented out , no need to modify it .

clebersa commented 7 years ago

Hi @kingofswing,

So, if I understood right, you got the fixed sidebar working but now you have an error (last picture) when you log out and go to the landing page, right? I am not using the landing page anymore because my project does not need that. If you share how your webpack.mix.js, I might be able to help.

I am sorry. I forgot to mention that commented block in the login page. We should check why that is happening and maybe suggest a fix in a pull request. Still talking about the login page, I did not see that problem in the scripts_auth.blade.php. I will check that in my project later.

Bye.

kingofswing commented 7 years ago

No. I mean after the last error occurs when logged out, at first didn't know where to find the clue, but finally I got it, and added 2 files manifest.js``vendor.js before app.js in scripts_auth.blade.php file accordingly , just as the way of your adding the 2 js file in scripts.blade.php,the red part of errors is gone now. so many thanks .

BTW, yesterday I built a project, and did as the following link :

https://almsaeedstudio.com/blog/integrate-adminlte-with-laravel

to let the sidebar scrolling under fixed status, the docs (javascripts options section) say just adding a global AdminLTEOptions array before the loading of app.js , and import jquery.slimscroll.js after app.js . of course all plugins should be added one by one if needed.

clebersa commented 7 years ago

Hi @kingofswing,

I see. It is good that you solved the problem in the login page. Thanks for sharing the solution.

I have seen that article before. Did this new project you built work as you wanted? I did not try it, but if it worked for you, I am glad.

kingofswing commented 7 years ago

Hi, Mr. @clebersa : the new project lacks some customised login/register(may there are , I have not checked the whole folder yet, just take it for a test :-) ), the manual management of js plugins seems ok for newbie like me, at least, I know when or where to put the js plugin the one I wanted , next I want to focus on the dev of backend and frontend pages , by now , still have no experiences about using modal pop in backend dev. or other plugins.

clebersa commented 7 years ago

Hi @kingofswing,

I got it. Well, goo luck in your project then! I hope you get working as you want!

If you think you are done with this issue, can you please close it?

Have a safe development haha Bye.