WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

made toolbar sticky, moving with the page

Browse Source
This commit is contained in:
Bea 2020-04-20 11:32:44 +02:00
parent 40808bf104
commit 149254ba95
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/main.css
View File

@ -1,7 +1,8 @@
body { body {
position: relative; position: relative;
margin: 0px; margin: 0px;
height: calc(var(--vh, 1vh) * 100); /* height: calc(var(--vh, 1vh) * 100);*/
height: 10000px;
width: 100%; width: 100%;
overflow: scroll; overflow: scroll;
} }

10
public/index.html
View File

@ -38,11 +38,8 @@
</head> </head>
<body> <body>
<!---Whiteboard container -!-->
<div id="whiteboardContainer"></div>
<!---Toolbar -!--> <!---Toolbar -!-->
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;"> <div id="toolbar" style="position: -webkit-sticky; position: sticky; top: 10px; left: 10px; z-index: 1;">
<div class="btn-group"> <div class="btn-group">
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn"> <button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
@ -158,6 +155,11 @@
<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i> <i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
</button> </button>
</div> </div>
</div>
<!---Whiteboard container -!-->
<div id="whiteboardContainer" style="z-index: 0;"></div>
</body> </body>
</html> </html>