Ext JS Grid Vertical Scrollbar Problem

I have a problem that deals with the vertical scrollbar not showing up within a grid component from the Ext JS Library 2.0.1 (http://extjs.com/).  I have posted the question in their forum with very poor results.  I am hoping one of you experts might have a clue as to what could possibly be causing this problem.  I have modified a livesearch function from one of the Ext JS tutorials located at http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-1, and it works perfectly well.  You can see it work at http://www.sleepamazing.com/associates/ (please do not pay attention to the action icons.  They are not set up to work on this website).  The problem only occurs when I take the code and modify it to display three different grids on the same page and place it into my website at http://www.sleepamazing.com/chiropractic/.  This problem occurs without regard to the browser I am viewing the page on.

Does anyone know what could possibly be preventing the vertical scrollbar from displaying on my webpage?
LVL 17
OmniUnlimitedAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pawel WitkowskiSenior Javascript DeveloperCommented:
Can you tell us how it should look like ? The best would be an image of this ;)
0
OmniUnlimitedAuthor Commented:
Hi wilq32!

How are you this morning?  It's good to hear from you!

Sure thing, I've attached the following screenshots.  Screenshot-1.jpg is the way the grid renders upon page load.  Screenshot-2.jpg is the way it should look like.  (In case you are wondering "How in the world did you get the vertical scrollbar to show up when you are saying that it doesn't show up?", it's just that it does not show up on page load.  If I do anything to cause a reload of the grid (say enter a search parameter, or click on one of the headers to do a sort by column, etc.) the scrollbar shows up.

This is a real mystery for me.  Validation shows that the page is relatively clean (the only errors showing are from the live chat feature, but I think it is because the validator does not know how to interpret the javascript and URL's associated with this feature.)  Plus this problem shows up in ALL browsers, not just FF.

Thanks a million for taking a look at this for me! :)
screenshot-1.jpg
screenshot-2.jpg
0
OmniUnlimitedAuthor Commented:
Forgot to mention, I don't think it is the Ext JS library components.  They work perfectly fine on my demo page at http://www.sleepamazing.com/associates/.  I wish I knew what it was about my particular website that is causing all these problems.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Pawel WitkowskiSenior Javascript DeveloperCommented:
Compare livesearch.js  in GRID

in demo you provide there is height:200

In your grid there is no such a thing. Add this and it should be ok (I hope) here are cutout from livesearch.js  from demo.



168 animCollapse: false,
169
170 width:715,
171 height:200,
172 stripeRows:true,
173 title:'Search results',
174 iconCls:'icon-grid',
175 renderTo: "gridWrapper"
176// autoHeight:true
177
178 });
179 } 

Open in new window

0
OmniUnlimitedAuthor Commented:
I'm sorry for the confusion, wilq32.  I have my demo set to 200, but grid2 (the grid showing in the screenshots) is set to 100.  Otherwise, from what I can see, the code that you gave me is identical to what is in the coding for grid2, except for the commented out autoheight:true statement.  Now, if I am correct, that commented out statement should have no effect, am I right?

I would like to keep grid2 set to 100 (as it is in the screenshots).  Do you see any way of doing that?

 Hey, by the way, I notice you are really close to becoming an EE Sage.  Congratulations!
0
Pawel WitkowskiSenior Javascript DeveloperCommented:
you got 3 grids (I dont know for what) but you changed only second one. Try changing height :100 to other ones:

lines: 380, 317   in  livesearch.js
0
OmniUnlimitedAuthor Commented:
I don't understand what you mean.  You can log into the website at https://www.sleepamazing.com/chiropractic/ by typing in "test" for the username and "test1234" for the password.  There you will see the three grids and how they are rendered.  One grid is in the "Referrals" tab, and two are in the "Status" tab.  If I increase the height to 500, I would need to enter in more names into the database in order to test the vertical tab.  But, based on my earlier tests, it does not matter what dimensions height is set to, the vertical tab still does not render.
0
Pawel WitkowskiSenior Javascript DeveloperCommented:
can you do height:100 on  https://www.sleepamazing.com/chiropractic/  page in lines I gave you ? I need to check something please :)
0
OmniUnlimitedAuthor Commented:
Oh!  Sorry :P  See... I can do some pretty stupid things.  BTW, I made the changes you asked for.
0
Pawel WitkowskiSenior Javascript DeveloperCommented:
Ok - debugging this huge framework just sux. For you I have simple solution that should work for ya. Just add in CSS this:

.x-grid3-scroller{
   
   height:200px;
}



Where height is exacly what you need - 25 px :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OmniUnlimitedAuthor Commented:
Holy cow!  You are awesome!  I had to set the height to 75px (as you said, 25px less than the 100px), and it worked!

My only question is, it appears that this class is common to all three grids.  How am I going to handle this considering that the grids are different sizes?
0
OmniUnlimitedAuthor Commented:
Huh, I thought maybe the solution was to do CSS off the element ID's, but I tried that and it didn't work.
0
OmniUnlimitedAuthor Commented:
I restored the grid height on grids 1 and 3 to 500.  The CSS locks in the scroll to the 100px size.
0
OmniUnlimitedAuthor Commented:
I've got it!  Each grid has its own unique ID.  I simply changed your CSS to reflect the unique identifier such that the CSS now looks like this:

#refer_panel1 div.x-grid3-scroller {
   
   height:175px; // I set this grid to 200px so you can see that it works.
}

#refer_panel2 div.x-grid3-scroller {
   
   height:75px;
}

#refer_panel3 div.x-grid3-scroller {
   
   height:475px;
}
0
OmniUnlimitedAuthor Commented:
wilq32, thanks a million for all your help.  I don't know what I'd do without you!
0
OmniUnlimitedAuthor Commented:
You are an outstanding programmer.  Thanks a million!
0
Pawel WitkowskiSenior Javascript DeveloperCommented:
Huh sorry for long response I got meeting in my work ;) Good to know that it worked! Good luck with coding
0
OmniUnlimitedAuthor Commented:
No problem, thanks for the help! ;)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.