search

creativetimofficial / ct-vue-paper-dashboard-pro

Vue Paper Dashboard PRO - made by Creative Tim
https://www.creative-tim.com/product/vue-paper-dashboard-pro
41 stars 13 forks source link

Cannot scroll any content in main-panel #42

Closed maciz84 closed 6 years ago

maciz84 commented 6 years ago

Hi Guys,

I cannot scroll my content in my main-panel div. I am not too bothered with the scroll I just want it scrollable:

<div class="main-panel perfect-scrollbar-on">

Could someone please help me?

cristijora commented 6 years ago

Hi @maciz84 The main panel should be scrollable by default. Have you changed any of the original scss files?

.main-panel class has overflow: auto and max-height: 100%; which should make it scrollable. Does this happen on any browser for you or only in some browser?

maciz84 commented 6 years ago

@cristijora I have not changed any of it...I don't think I have. Could you tell me what the default should be?

maciz84 commented 6 years ago

On the other hand do I have to import the scss file into my layout page?

I have imported these:

` 

<!--  Fonts and icons     -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href="~/assets/css/themify-icons.css" rel="stylesheet">`
maciz84 commented 6 years ago

I apologise I am not too familiar with scss and Single Page applications?

maciz84 commented 6 years ago

This is the css I have based on what I downloaded it after purchase:

.main-panel { background-color: #f4f3ef; overflow: auto; position: relative; z-index: 2; float: right; width: calc(100% - 260px); min-height: 100%; } .main-panel > .content { padding: 30px 15px 0 15px; min-height: calc(100% - 123px); } .main-panel > .content .row .col-md-12 > .title { margin-top: 0; } .main-panel > .footer { border-top: 1px solid rgba(0, 0, 0, 0.1); } .main-panel .navbar { margin-bottom: 0; }

maciz84 commented 6 years ago

It happens on all browsers and it appears that the css doesn't have the max-height property. I added it and nothing changed

maciz84 commented 6 years ago

@cristijora any help please??

maciz84 commented 6 years ago

Also the main content creates an overlay so that my modals cannot be accessed?? you can see them behind the overlay but aren't clickable. Ahh this is turning out to be a horrible experience for me. The main-panel class has a lot of issues. When I don't use it the modal works as expected and scrolling but my content drifts into the left nav bar.

maciz84 commented 6 years ago

Hi Guys,

I really need some help now. I no this isn’t the right forum for this but I have paid over $100 for this and need to know what I need to do to fix this? So please can someone help me, this wasn’t free so some help or any communication from you is now required. A refund will otherwise be necessary if I cannot get it to work

maciz84 commented 6 years ago

@cristijora could you please tell me how to get a refund please?

cristijora commented 6 years ago

Hi @maciz84 again. I'm really sorry to hear that and unfortunately we do have a working schedule so we can't respond every other 2 hours. Do you use any other css along with the one from the template because this shouldn't really happen. If you run the demo from the archive you downloaded do you have the same issue or is this in your project only?

cristijora commented 6 years ago

If you are fine with that you could send me over the email the code you currently have so I can take a better look where exactly the problem is? Hundreds of people downloaded this template and no one had scrolling issues as far as we now so most likely there is some css overriding the default behavior or not all the css is imported. Email: joracristi@gmail.com

maciz84 commented 6 years ago

@cristijora thanks for your response and I appreciate that you cannot response every 2 hours but I only got one response from you guys. Anyway what I did notice is that if I don't have a footer the content cannot scroll. When I have one it works. Is there a way I can have scroll without the footer?

maciz84 commented 6 years ago

@cristijora also if i remove the "wrapper" div it works properly? I am also using typescript and ASP.net core if that helps? My Layout page is below:

`<!DOCTYPE html>

@ViewData["Title"] - NewPaper @RenderBody() @RenderSection("scripts", required: false)

`

cristijora commented 6 years ago

@maciz84 just out of curiosity do you have this template http://vuejs.creative-tim.com/paper-dashboard-pro/#/admin/overview or this one https://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/dashboard.html?_ga=2.16435318.1323994691.1523816041-1215692048.1510951128

Tried removing footer on both but still can't reproduce this strange behavior. Do you have it online somewhere so I could take a look ?

maciz84 commented 6 years ago

@cristijora I have the first one the vuejs one

maciz84 commented 6 years ago

@cristijora I don't have it online unfortunately as it is an in-house project.

maciz84 commented 6 years ago

Here is an image without the wrapper div:

scroll

maciz84 commented 6 years ago

With the wrapper div:

no_scroll

maciz84 commented 6 years ago

Funny thing is that I also didn't have the black nav pane only the brown and white so I had to write my own css class for the black background. I ended up purchasing both the Paper Dashboard HTML and the Vue Paper Dashboard just to make sure

maciz84 commented 6 years ago

Here is the css:

paper-dashboard.txt

maciz84 commented 6 years ago

@cristijora I just removed the wrapper class as my final solution. It was the only way