framework7

Open full view…

Split View is not working as expected on Android Tablets and Safari for Windows.

Irina Jerez
Thu, 25 Sep 2014 23:47:50 GMT

Please check the img... how can i fix it? [Splitview](//res.cloudinary.com/moot/image/upload/t_d3-gallery-s3/v1411688961/:framework7:hWq0:splitview.jpg.jpg)

NikolayKuznetsov
Fri, 26 Sep 2014 04:25:23 GMT

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

NikolayKuznetsov
Fri, 26 Sep 2014 04:43:25 GMT

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; } ---

NikolayKuznetsov
Fri, 26 Sep 2014 05:57:17 GMT

Ops, sorry. fix isn't correct.

NikolayKuznetsov
Fri, 26 Sep 2014 09:50:58 GMT

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(); ---

Irina Jerez
Fri, 26 Sep 2014 11:18:58 GMT

Thanks! it work! :D

NikolayKuznetsov
Sat, 27 Sep 2014 06:43:55 GMT

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(); ---