the web interface is too small

[lyright]

I've tried chrome, firefox on both Win 10 and Mac
pyspider version 0.3.9

[csj110]

我在chrome上打开http://demo.pyspider.org也会界面小 换了firefox后开始也很小 过了几秒就好了 也不知道什么原因

[dbafu]

this style in debug.min.css:

#tab-web iframe {
border-width: 0;
width: 100%;
}

caused the bug

changed it to a explicit value like this:

#tab-web iframe {
border-width: 0;
width: 100%;
height: 900px #according to your screen as you like to (768-900 or larger value)
}

you can change the page source code via developer tool (press f12 in win , option + command + i in macOS) temporarily .

<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="100%"></iframe>

to

<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="900px"></iframe>

as a hack

[ok2fly]

changed it to a explicit value like this:

#tab-web iframe {
border-width: 0;
width: 100%;
height: 900px #according to your screen as you like to (768-900 or larger value)
}

still have bug

[ok2fly]

to fix the bug completly for all browser is too hard for me. so sorry .

1
------debug-min.js--
change

$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="50%"></iframe>');
to
$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="100%"></iframe>');

---

this work for chrome,but in firefox , one more height is added, i do not know why.

<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="60px" height="100%"></iframe>

---

2

in debug.min.css change to below:

#debug-tabs{margin-bottom:45px;height:100%}#tab-web.fixed{padding-top:24px}#tab-web{height:100%}.iframe-box{height:100%}#tab-web iframe{border-width:0;width:100%}#tab-html

---

this will work fine in chrome, but not for firefox and safari

[binux]

By design the height of iframe show adjusted by JS after page loaded:

pyspider/pyspider/webui/static/src/debug.js

Line 523 in f2b7fb0

doc.onreadystatechange = () => {

[ok2fly]

so you can fix it by doing this:
1
in debug.min.css change to below:

#debug-tabs{margin-bottom:45px;height:100%}#tab-web.fixed{padding-top:24px}#tab-web{height:100%}.iframe-box{height:100%}#tab-web iframe{border-width:0;width:100%}#tab-html

I add 3 height:100% and a .iframe-box{height:100%} compared to original file

---

2
in debug.min.js change to below:

change

$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="50%"></iframe>');

to

$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="100%"></iframe>');

and delete

a.onreadystatechange=function(){"complete"===a.readyState&&$("#tab-web iframe").height(a.body.scrollHeight+60)},

---

finished the above,will fix the bug.

this will work fine in both firefox and chrome.

in safari this error will happen because of security limit in safari that limitting access local file prevent css and js loads.
SecurityError (DOM Exception 18): The operation is insecure.
Failed to load resource: the server responded with a status of 404 (NOT FOUND)

[dbafu]

0
in /usr/local/lib/python3.6/site-packages/pyspider/webui/templates/debug.html
change
<div id="debug-tabs" >

to
<div id="debug-tabs" style="height:100%;">

this fix a css bug in firefox

1
in debug.min.css change to below:

#debug-tabs{margin-bottom:45px;height:100%}#tab-web.fixed{padding-top:24px}#tab-web{height:100%}.iframe-box{height:100%}#tab-web iframe{border-width:0;width:100%}#tab-html
I add 3 height:100% and a .iframe-box{height:100%} compared to original file

2
in debug.min.js change to below:

change

$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="50%"></iframe>');
to

$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="100%"></iframe>');
and delete

a.onreadystatechange=function(){"complete"===a.readyState&&$("#tab-web iframe").height(a.body.scrollHeight+60)},

[LittleGhosts]

I tried to modify the debug.min.css and debug.min.js file, but it still looks like this

I use the chrome and the pyspider 0.3.10

[cheniia]

@LittleGhosts It's useful to change debug.min.js for Chrome like this:
change
$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="50%"></iframe>');
to
$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="900px"></iframe>');

[LittleGhosts]

I've tried to change what's in debug.min.js, and I've changed what's in debug.min.css the previous way, but it's still looks like this

[ivanhuanghhh]

I use mac, I edit /usr/local/lib/python3.6/site-packages/pyspider/webui/static/debug.min.js file

// before
a.onreadystatechange = function () { 
  "complete" === a.readyState && $("#tab-web iframe").height(a.body.scrollHeight + 60) 
}
// after, change 60 to 900
a.onreadystatechange = function () { 
  "complete" === a.readyState && $("#tab-web iframe").height(a.body.scrollHeight + 900) 
}

It work for me. the 900 depends on your screen

[pythonwood]

@LittleGhosts It's useful to change debug.min.js for Chrome like this:
change
$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="50%"></iframe>');
to
$("#tab-web .iframe-box").html('<iframe src="/blank.html" sandbox="allow-same-origin allow-scripts" height="900px"></iframe>');

It work for me , and change 900px a suitable XXpx. ( no use while filling like 80% ...)

[xyb]

I think this issue was introduced in 59f3e4e because the automatic height adjustment depends on readystatechange, but the iframe only has load events.
see also: https://stackoverflow.com/a/36640131/150841