Scrolling pane does not resize

[chanders]

Hi! I created a page (div) that has a toolbar. Just before putting the scrolling pane I put a search bar and then the scrolling pane. So when the scrolling pane is populated via ajax, it looks like it is scrolling under the search bar. However after searching (xbox is a good search) the scrolling pane does not resize to fit the available space. you can see some data being cut. Is there some function that needs to be run to have the scrolling pane resize after being populated by ajax? Thanks for your reply!

See demo here (click the search) dont forget to check it on an iphone. The 'load more' doesnt work yet.

http://trinifieds.com/classifieds/?theme=mobile

[chanders]

http://groups.google.com/group/iscroll/browse_frm/thread/cdd3c78c8b046c4b

Here is a link to the code and description.

[DataZombies]

The search bar has to be included in the setPageHeight() calculation. In jqt.bars.js look for // Navigation Bar $navbar = $('.toolbar', this); navbarH = $navbar.length > 0 ? ($navbar.length > 0 ? $navbar.outerHeight() : 0) : 0; ...below that add... // Search Box \ customization ** $searchbox = $('.searchbox', this); searchbox = $searchbox.length > 0 ? ($searchbox.length > 0 ? $searchbox.outerHeight() : 0) : 0; Then add the searchbox variable to the calculation like so... $wrapper.height(win.innerHeight - navbarH - toolbarH - tabbarH + searchbox + 'px'); Also... It's a good idea to call setPageHeight() after the AJAX data is loaded. Put the trinifieds stylesheet below the jQT & DZ style sheets. That way your styles will override the defaults. There's an extra double-quote in the middle of the LI tags' class assignment: <li class="arrow"cat-item cat-item-3">

[chanders]

Thanks! This worked perfectly. You had a little typo in the last line of the code. It should have been -searchbox and not +searchbox but I caught it. Also, since the form is not in the scrollpane, does the tabbar still need to be hidden? If no, how to force it to remain visible? Thanks again!

I take it I wont be able to take advantage of any subsequent bug fixes in jqt.bars.js?

[DataZombies]

"...little typo..." D'OH!

"...since the form is not in the scrollpane..." Hmm. I don't know. Try it and let me know how it goes. To force the tabbar on a form give the form the keep_tabbar class.

"...wont be able to take advantage..." Yes, you will. Just remember to add your customizations to the new file.

Thanks for using DZ/jQT djp

[chanders]

"...To force the tabbar on a form give the form the keep_tabbar class..." The class is applied to the form or the page (div) ?

I tried it on the form but it didnt work. I then tried it on the page (div) and it worked perfectly! The only problem is when you switch pages and return to this page the tabbar is hidden. Any suggestions?

[DataZombies]

That's an issue with jQT resetting all classes on the page's div tag. Try putting the 'keep_tabbar" class in the toolbar div.

[LouMazz]

Any chance you could a "bottomMargin" parameter so that any extra stuff like edge-to-edge buttons could be accounted for without messing up the basic code? as in: setPageHeight(bottomMargin); //add fudge factor for this app

[DataZombies]

Like what stuff? The whole page is visible so anything you put on the page is visible.

[LouMazz]

my page is:

<div id="itemList" class="s-pane">
    <div class="toolbar"> 
        <a href="#" class="button leftButton back">Back</a>
        <a href="#" class="add">Add</a> 
        <h1>CATEGORY</h1><h2>MENU</h2>
    </div>
    <div id="itemListBody" class="s-scrollwrapper">
        <div id="itemListPane" class="s-scrollpane">
            <!-- set by list writing function -->
        </div>
    </div>
    <span class="diButton"><a class="redButton submit">Delete items</a></span>
    <span class="boButton"><a class="whiteButton submit">Build <i>BuyIt</i>™ order</a></span>
    <div id="itemListStatus">
        <!-- place for forms and status messages -->
    </div>
</div>

If I call setPageHeight(), I get the wrong result. I have to subtract the height of the two buttons by modifying the source. Am I doing something wrong?

[DataZombies]

That's exactly what you have to do; modify jqt.bars.js to allow for the objects outside of the s-scroll... divs. You're more than welcome to fork this repo and modify it for setPageHeight(bottomMargin).

[jdunsworth]

I hate to bring this back up but I'm having issues with this as well. I am writing an app that has an "Image Band" below the toolbar which is just a 100px tall image and all the content underneath it scrolls. I've tried the suggestion above by adding it to the setPageHeight() calculation but it is still having that same issue where the bottom cuts off unless you scroll the image band and toolbar.

http://grand.cpngc.org/