html - Bootstrap footer rotate issue -
i creating mobile app using html/css/js bootstrap , phonegap build.
in app have footer on pages 3 navigation buttons. problem when rotate device portrait landscape, buttons not resize take full width supposed to. however, if click 1 of nav buttons after rotating, new page loads show buttons @ full width. rotating once again portrait, has buttons taking way space.
i utilizing <div class="btn-group btn-group-justified">
documentation states.
my footer html follows:
<nav id="footer" class="navbar-fixed-bottom col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" role="navigation" style="padding: 0 0;"> <div id="footergroup" class="btn-group btn-group-justified"> <a type="button" class="btn btn-default active" href="#"><span class="glyphicon glyphicon-home"></span> home</a> <a type="button" class="btn btn-default" href="fundhistorypage.html"><span class="glyphicon glyphicon-align-justify"></span> history</a> <a type="button" class="btn btn-default" href="calculatorpage.html"><span class="glyphicon glyphicon-usd"></span> calc</a> </div> </nav>
i have tried setting resize event handler remove "btn-group-justified" class , re-add no avail.
$( window ).resize(function(){ $("#footergroup").removeclass('btn-group-justified'); $("#footergroup").addclass('btn-group-justified'); });
any advice appreciated.
edit: footer re-sizes when testing in browser. not on test devices.
i hate answering own question going anyways. after playing around bit last night ended employing following:
$( window ).resize(function(){ $("#footergroup").removeclass('btn-group-justified'); settimeout(function(){ $("#footergroup").addclass('btn-group-justified'); }, 1); });
i found delay of 1 millisecond before adding class in enough resize properly. strange. opened new issue on bootstrap repo here.
Comments
Post a Comment