0

In some jQuery mobile tabs I have content that requires a scrollbar.

The navbar that controls them is in the header like in this fiddle.

I have tried to set height: 100%; overflow: auto; on all levels of the tab content, but the scrollbar is still applied to the page as a whole.

How can an overflowing scrollbar be adaptively applied to tabbed content only?

jsFiddle

HTML

<div data-role="page" id="mainPage">
    <div data-role="tabs" id="tabs">
        <div data-role="header" style="overflow:hidden;">
            <h1>I'm a header</h1>
            <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" class="ui-btn-active">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
        </div>
        <div id="one" class="ui-body-d ui-content tabContent">
            <h1>First tab contents</h1>
        </div>
        <div id="two">
            <ul data-role="listview" data-inset="true">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
    var $one = $('#one')
    for(var i=0; i<1000; i++){
        $one.append('<br/>content')
    }

})

CSS

body{
    overflow:hidden;
}
.tabContent{
    height:100%;
    overflow:auto;
}
  • you mean you don't want the body to have overflow, and the tab to have scrollbars? – Amin Jafari Jun 22 '14 at 04:20
  • @AminJafari Yes, I'd like the window as a whole not to scroll, but I want the content between the header and footer which are tabs content to scroll only. Thank you so much for looking at my Q! –  Jun 22 '14 at 04:22
  • have you tried setting the `overflow` of the `body` as hidden? and for the tabs that you wanna be scrolled `overflow-y:scroll;` – Amin Jafari Jun 22 '14 at 04:26
  • @AminJafari The page no longer scrolls, but the scrollbar in the tab is "disabled". –  Jun 22 '14 at 04:32
  • can you show me some code or better a jsFiddle? – Amin Jafari Jun 22 '14 at 04:33
  • @AminJafari Thank you for your time on this Amin Jafari! I have added the code & fiddle. –  Jun 22 '14 at 04:54
  • you're welcome, I'm working on it – Amin Jafari Jun 22 '14 at 05:05

2 Answers2

1

do you need something like this? http://jsfiddle.net/VjYq9/3/

#one{
    height:330px;
    overflow-y:scroll;
}

UPDATE: there you go http://jsfiddle.net/VjYq9/5/

$one.height($(window).height()-120); //note that -120 must be the size of the header, so it is the window size minus the size of the header so "#one" would fit the screen!
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
  • Thank you for your time Amin, but I'm seeking adaptive behavior so no fixed height. Is it possible to use `height:100%;`? –  Jun 22 '14 at 05:20
  • Thank you again Amin Jafari (I apologize for addressing you by your first name in the last comment), but I'm looking for a few CSS rules (sorry for not specifying earlier). I can do this method, but my page is very active, so I was hoping to avoid this route for manageability's sake. Does CSS really not have the capability of managing this? –  Jun 22 '14 at 05:38
  • it's okay my friend, you can call me Amin. and unfortunately no, there is no way to do this by CSS (at least as far as I know). because the CSS is loaded all at once at the page load, hence it can only set specified values to elements and can not calculate the height of the window and can not set dynamic values! – Amin Jafari Jun 22 '14 at 05:42
  • Eh, alright. I'll give you the check until someone finds a hack, or CSS finally catches up to the reality of webapps. Thank you again for your effort. –  Jun 22 '14 at 05:47
0

There is a CSS only solution, @user1382306 please see below:

.max-height-occupied {
    position: absolute;
    top: 88px; /*your header height*/
    right: 0;
    bottom: 44px; /*your footer height */
    left: 0;
}

And the at your target content div just put it like this:

<div data-role="content" data-theme="b" class="max-height-occupied">
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
Hugo Lourenço
  • 1
  • 1