It's problem in old webkit used in Safari Windows/ Android 4.0-4.3 it doesn't support calc() function for css rules. Look screenshot where i tried to fix this issue (width: 72%) http://prntscr.com/4qdxnm
Working fix: set left and width values --- .view-main { float: right; width: -webkit-calc(100% - 320px); width: -moz-calc(100% - 320px); width: -ms-calc(100% - 320px); width: calc(100% - 320px); width: 100%; left: 320px; } ---
Ops, sorry. fix isn't correct.
Look now here http://softexe.com/www/split-view-panel/ it's using javascript hack without detecting browsers yet. --- // Initialize your app var myApp = new Framework7(); //alert(123); // Export selectors engine var $$ = Dom7; //$$("div.view-main").css("width",($$("div.views").width() - 320)+"px"); window.onresize = function(){ //alert($$("div.panel-left").css("display")); if($$("div.panel-left").css("display") == "block") { $$("div.view-main").css("width",($$("div.views").width() - 320)+"px"); } else { $$("div.view-main").css("width",($$("div.views").width())+"px"); } }; window.onresize(); ---
Thanks! it work! :D
It's corrected version --- window.onresize = function(){ //console.log($$("div.panel-left").css("display")); if($$("body").width() > 769){ //|| $$("div.panel-left").css("display") == "block") { $$("div.view-main").css("width",($$("div.views").width() - 320)+"px"); } else { $$("div.view-main").css("width",($$("div.views").width())+"px"); } }; window.onresize(); ---