I’m having an issue where the vertical side menu is moving down (the buttons/text, but the background of it remains in place, just stretches). It moves down as the table to the right gets more entries. Any ideas on how to fix this?
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page - Maintenance.Web</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/LayoutStyleSheet.css" />
</head>
<body>
<div>
<nav class="navbar">
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</nav>
</div>
<div class="wrap">
<nav class="mainmenu">
<ul>
<li class="menuheader">MRO Work Center
<ul> <!-- Sub-menu nested list -->
<li class="submenu"><a href="/">Work Orders</a></li>
<li class="submenu"><a href="#">Preventive</a></li>
<li class="submenu"><a href="#">Assets</a></li>
<li class="submenu"><a href="#">Reports</a></li>
<li class="submenu"><a href="#">Inventory Items</a></li>
</ul> <!-- End the sub-list -->
</li>
<li class="menuheader">Technician <!-- ..and repeat -->
<ul>
<li class="submenu"><a href="#">Assigned</a></li>
</ul>
</li>
<li class="menuheader">Requester
<ul>
<li class="submenu"><a href="/Home/TicketRequest">Submit Request</a></li>
</ul>
</li>
<li class="menuheader">Settings
<ul>
<li class="submenu"><a href="#">Specs/Class</a></li>
</ul>
</li>
</ul>
</nav>
<link rel="stylesheet" type="text/css" href="/css/IndexStyleSheet.css" />
<table id="ticketsTable" class="table">
<tr>
<th>Ticket# |</th>
<th>Location |</th>
<th>Area |</th>
<th>Asset# |</th>
<th>Ticket Type |</th>
<th>Ticket Date |</th>
<th>Assigned To |</th>
<th>Date Assigned |</th>
<th>Status |</th>
<th>Actions |</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=1">Edit</a></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=2">Edit</a></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=3">Edit</a></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=4">Edit</a></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=5">Edit</a></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=6">Edit</a></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=7">Edit</a></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1/1/0001 12:00:00 AM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=8">Edit</a></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>2/1/2018 1:36:12 PM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=9">Edit</a></td>
</tr>
<tr>
<td>10</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>2/1/2018 1:36:14 PM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=10">Edit</a></td>
</tr>
<tr>
<td>11</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>2/1/2018 1:36:19 PM</td>
<td></td>
<td></td>
<td></td>
<td><a href="/Home/TicketEditor?ticketId=11">Edit</a></td>
</tr>
</table>
</div>
</body>
</html>
layout css:
.navbar {
height: 145px;
background: linear-gradient(#8c8c8c, #c4c4c4);
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #002d62;
}
#logo {
height: 120px;
width: auto;
}
.mainmenu {
width: 18%;
background: linear-gradient(#8c8c8c, #c4c4c4);
border-style: double;
border-color: #002d62;
border-radius: 10px;
display: inline-block;
}
.menuheader {
list-style: none;
font-size: 145%;
font-weight: bolder;
color: black;
}
.submenu {
list-style: none;
padding: 15px;
border-style: double;
border-radius: 2px;
border-color: #002d62;
}
.submenu a {
text-decoration: none;
color: #002d62
}
.submenu:hover {
background-color: #95bfe6;
text-decoration: none;
color: white;
}
.wrap {
display: table;
}
.mainmenu, #ticketRequest{
display: table-cell;
}
.mainmenu, #ticketsTable {
display: table-cell;
}
ticketeditor css:
body {
padding: 40px;
background: #efefef;
}
.btn {
background: #24abf2;
color: #fff;
padding: 15px;
font-weight: 700;
display: inline-block;
font-size: 14px;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lightbox {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.lightbox:target {
display: flex;
justify-content: center;
align-items: center;
}
.lightbox__body {
width: 400px;
position: relative;
}
.lightbox__content {
background: #fff;
padding: 40px;
border-radius: 2px;
position: relative;
}
p {
margin: 0;
font-size: 14px;
line-height: 1.6em;
color: #444;
}
}
.lightbox__close-btn::after {
content: "Close";
display: inline-block;
position: absolute;
right: -15px;
top: -15px;
z-index: 3;
width: auto;
height: 30px;
cursor: pointer;
background: #000;
font-weight: 700;
font-size: 11px;
padding: 0 15px;
line-height: 30px;
color: #fff;
}
.lightbox__close-btn::before {
content: "";
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
}
Also, here is a picture of the concern:
