Double scroll bars when using the Panels of jQuery Mobile 1.3 in ASP.NET MVC 4

问题

I cannot figure this out. Once I put the following code in the layout page and view it in a browser I'm showing 2 vertical scroll bars.

<div data-role="panel" 
     id="mypanel" 
     data-position="right" 
     data-display="push" 
     data-theme="a">       
</div><!-- /panel -->

回答1:

Was having a similar problem and noticed that was only when using my custom theme. I was adding my custom theme on the wrong order to the page and that was causing the problem. The right order is:

jquery.mobile.CUSTOM.min.css
jquery.mobile.structure-1.3.1.min.css

Hope this helps someone else also.

As mentioned by @user812775 if you are using a custom theme you should only use the jquery.mobile.structure.css and not the full jquery.mobile.css

回答2:

JQM Code adds "min-height: ..." so the solution is to override "min-height: to 0px.

回答3:

find this function in the jquery.mobile-X.X.X.js file and set the min-height to "100%" like I show below. I found that what it is doing is trying to change the min-height of your page when it thinks that the panel will not fit in the page, but in doing that it will sometimes mess up your pre-set page sizing and cause double vertical scrollbars...so setting it to 100% in the function will keep your page the same even when jquery tries to resize (if you don't already use a page height of 100%, set it instead to the size you use).

//simply set the active page's minimum height to screen height, depending on orientation
    resetActivePageHeight: function( height ) {
        var page = $( "." + $.mobile.activePageClass ),
            pageHeight = page.height(),
            pageOuterHeight = page.outerHeight( true );

        height = compensateToolbars( page,
            ( typeof height === "number" ) ? height : $.mobile.getScreenHeight() );

        // Remove any previous min-height setting
        page.css( "min-height", "" );

        // Set the minimum height only if the height as determined by CSS is insufficient
        if ( page.height() < height ) {
            page.css( "min-height", "100%" );
        }
    },

If you are using the jquery.mobile-X.X.X.min.js, here is the function you need to change:

resetActivePageHeight:function(b){var c=a("."+a.mobile.activePageClass),e=c.height(),f=c.outerHeight(!0);b=d(c,"number"==typeof b?b:a.mobile.getScreenHeight()),c.css("min-height",""),c.height()<b&&c.css("min-height","100%")},

来源：https://stackoverflow.com/questions/15737575/double-scroll-bars-when-using-the-panels-of-jquery-mobile-1-3-in-asp-net-mvc-4

标签

jquery

jquery-mobile

asp.net-mvc-4