Skip to content

Commit

Permalink
Fix window/document sizing in firefox.
Browse files Browse the repository at this point in the history
Another firefox issue is that height: 100% is calculated as 100% of
the containing element even when the containing element is the window.
This means that the size of any sibling element shifts the window size
down by that much and causes the vertical scroll bars to appear. This
doesn't happen in Chrome.

- So instead, put a pad element inside the noVNC_screen element that
  is the size of the control bar. This is hidden by the control bar,
  however, it causes things to be sized correctly.

- Also, rename noVNC_defaultScreen to noVNC_logo.

- Clean some style specification out of the HTML.
  • Loading branch information
kanaka committed Sep 13, 2011
1 parent 1c3df65 commit b70ce07
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 13 deletions.
15 changes: 9 additions & 6 deletions include/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,14 @@ html {
}

#noVNC_status_bar {
margin-top: 15px;
margin-top: 0px;
padding: 0px;
}

#noVNC_status_bar div {
font-size: 12px;
padding-top: 4px;
width:100%;
margin-top: 2px;
}

.VNC_status_button, #clipboardbutton, #connectbutton {
Expand Down Expand Up @@ -131,8 +130,12 @@ html {

/* Do not set width/height for VNC_screen or VNC_canvas or incorrect
* scaling will occur. Canvas resizes to remote VNC settings */
#noVNC_screen_pad {
margin: 0px;
padding: 0px;
height: 44px;
}
#noVNC_screen {
margin-top:40px;
text-align: center;
display: table;
width:100%;
Expand Down Expand Up @@ -231,8 +234,8 @@ html {
right:180px;
}

/*Default noVNC screen.*/
#noVNC_defaultScreen {
/*Default noVNC logo.*/
#noVNC_logo {
width:400px;
margin-left:auto;
margin-right:auto;
Expand All @@ -249,7 +252,7 @@ html {
1px 1px 0 #000;
}

#noVNC_defaultScreen span{
#noVNC_logo span{
color:green;
}

Expand Down
6 changes: 3 additions & 3 deletions include/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ updateState: function(rfb, state, oldstate, msg) {
klass = "noVNC_status_normal";
break;
case 'disconnected':
$D('noVNC_defaultScreen').style.display = "block";
$D('noVNC_logo').style.display = "block";
c.value = "Connection";
c.onclick = UI.connectPanelbutton;
case 'loaded':
Expand Down Expand Up @@ -375,14 +375,14 @@ connect: function() {
UI.rfb.connect(host, port, password);
//Close dialog.
setTimeout(UI.setBarPosition, 100);
$D('noVNC_defaultScreen').style.display = "none";
$D('noVNC_logo').style.display = "none";
},

disconnect: function() {
UI.closeSettingsMenu();
UI.rfb.disconnect();

$D('noVNC_defaultScreen').style.display = "block";
$D('noVNC_logo').style.display = "block";
UI.connSettingsOpen = false;
UI.connectPanelbutton();
},
Expand Down
11 changes: 7 additions & 4 deletions vnc.html
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@
value="Settings" id="menuButton"
onclick="UI.clickSettingsMenu();">
<input type="button" id="connectPanelbutton"
class="VNC_status_button" style="width:100px;"
onclick="UI.connectPanelbutton()" value="Connection" />
value="Connection" class="VNC_status_button"
onclick="UI.connectPanelbutton()" />
</div>

<!-- Clipboard Panel -->
Expand Down Expand Up @@ -135,13 +135,16 @@

</div> <!-- End of noVNC-control-bar -->


<div id="noVNC_screen">
<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
<div id="noVNC_screen_pad"></div>

<div id="noVNC_status_bar" class="noVNC_status_bar">
<div id="noVNC_status">Loading</div>
</div>

<!-- HTML5 Canvas -->
<h1 id="noVNC_defaultScreen"><span>no</span><br />VNC</h1>
<h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
<canvas id="noVNC_canvas" width="640px" height="20px">
Canvas not supported.
</canvas>
Expand Down

0 comments on commit b70ce07

Please sign in to comment.