Switched from using a list to absolute positions to achieve more

consistant behavior across different browsers.
This commit is contained in:
samhed 2013-07-25 15:34:16 +02:00
parent 9d04096e58
commit bd88b94393
2 changed files with 44 additions and 37 deletions

View File

@ -413,14 +413,6 @@ html {
margin-left: 0px;
}
#noVNC_extra_keys {
float: none;
top: 0px;
}
#noVNC_extra_keys li {
display: inline;
}
#showExtraKeysButton { display: none; }
#toggleCtrlButton { display: inline; }
#toggleAltButton { display: inline; }
@ -454,19 +446,34 @@ html {
.noVNC-buttons-right {
padding-right: 0px;
}
#noVNC_extra_keys {
float: right;
top: -35px;
}
#noVNC_extra_keys li {
display: block;
}
/* collapse the extra keys on lower resolutions */
#showExtraKeysButton { display: inline; }
#toggleCtrlButton { display: none; }
#toggleAltButton { display: none; }
#sendTabButton { display: none; }
#sendEscButton { display: none; }
#showExtraKeysButton {
display: inline;
}
#toggleCtrlButton {
display: none;
position: absolute;
top: 30px;
left: 0px;
}
#toggleAltButton {
display: none;
position: absolute;
top: 65px;
left: 0px;
}
#sendTabButton {
display: none;
position: absolute;
top: 100px;
left: 0px;
}
#sendEscButton {
display: none;
position: absolute;
top: 135px;
left: 0px;
}
}
@media screen and (min-width: 321px) and (max-width: 480px) {

View File

@ -68,23 +68,23 @@
value="Keyboard" title="Show Keyboard"/>
<input type="email" autocapitalize="off" autocorrect="off"
id="keyboardinput" class=""/>
<ul id="noVNC_extra_keys">
<li><input type="image" src="images/showextrakeys.png"
id="showExtraKeysButton"
class="noVNC_status_button"></li>
<li><input type="image" src="images/ctrl.png"
id="toggleCtrlButton"
class="noVNC_status_button"></li>
<li><input type="image" src="images/alt.png"
id="toggleAltButton"
class="noVNC_status_button"></li>
<li><input type="image" src="images/tab.png"
id="sendTabButton"
class="noVNC_status_button"></li>
<li><input type="image" src="images/esc.png"
id="sendEscButton"
class="noVNC_status_button"></li>
</ul>
<div id="noVNC_extra_keys">
<input type="image" src="images/showextrakeys.png"
id="showExtraKeysButton"
class="noVNC_status_button">
<input type="image" src="images/ctrl.png"
id="toggleCtrlButton"
class="noVNC_status_button">
<input type="image" src="images/alt.png"
id="toggleAltButton"
class="noVNC_status_button">
<input type="image" src="images/tab.png"
id="sendTabButton"
class="noVNC_status_button">
<input type="image" src="images/esc.png"
id="sendEscButton"
class="noVNC_status_button">
</div>
</div>
</div>