css - JQuery Mobile Grid behavior different between local and JSBin -


edit: turned out caused nbsp's in source html. i'm leaving question in hope might else solve same problem.

jquery mobile's grid feature not working correctly when serve locally or open file.

the test code i've pasted @ bottom of message works correctly in jsbin. blocks line no vertical offsets. here's jsbin link , link image of output.

http://jsbin.com/bocubeqaza/1/edit?html,output

https://drive.google.com/file/d/0bxfysp3qjvxxukgzeupbme9kcw8/view?usp=sharing

serving file locally, however, produces vertical offset in right element of each group of blocks. here's link output code (which has no local dependencies) when viewed locally.

https://drive.google.com/open?id=0bxfysp3qjvxxvkz3czfactdjowm

(sorry image links; so's imgur uploader doesn't google drive links , don't have alternate public location screen grabs)

i've tried obvious things clearing browser cache , restarting it. moreover, misbehavior reproducible when serve desktop , view on phone (android, chrome browser).

<!doctype html> <html>   <head>     <meta charset="utf-8" />              <title>sandbox</title>      <meta name="viewport" content="width=device-width" initial-scale=1.0>       <!-- stylesheets -->         <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">       <!-- scripts -->     <script src="http://code.jquery.com/jquery-2.2.4.js"></script>      <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>    </head>   <body>      <div data-role="page" id="sandbox">       <div data-role="content">          <div style="background: grey;">foo</div>         <div class="ui-grid-a">             <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">block a</div></div>             <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">block b</div></div>         </div><!-- /grid-a -->         <div style="background: grey;">bar</div>         <div class="ui-grid-b">             <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">block a</div></div>             <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">block b</div></div>             <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">block c</div></div>         </div><!-- /grid-b -->       </div>   </div>   </body> </html> 

in case it's helpful, there's issue opened @ jqmobile site morning: https://github.com/jquery/jquery-mobile/issues/8501 . responded closed issue since wasn't reproducible in jsbin.

any appreciated. thanks!

embarrassingly, turned out caused nbsp chars. got code when pasted grid examples jq mobile demos , editor wasn't configured show them (it now!). compounding matter, appears jsbin helpfully scrubs them pasted html -- explains why code worked there , not locally.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -