Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Header is off the height
See original GitHub issueIssue type:
- Bug report
Environment:
- AdminLTE Version: 2.4.8
- Operating System: Windows
- Browser (Version): Chrome (Latest)
Description
Header section is off in size.
Here is my the current output of my upgrade.
Full source code is here https://github.com/AccountGo/accountgo
The index page full html is
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AcountGo</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="~/plugins/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="~/adminLTE/css/AdminLTE.min.css">
<!-- Overriding Css -->
<link rel="stylesheet" href="~/adminLTE/css/AdminLTEOverride.css">
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect. -->
<link rel="stylesheet" href="~/adminLTE/css/skins/skin-blue.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="~/scripts/vendor.chunk.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.2/bluebird.min.js"></script>-->
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="~/" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>AG</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>AccountGo</span>
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li>
<!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<img src="~/adminLTE/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu -->
<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li>
<!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="~/adminLTE/img/user2-160x160.png" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">@User.Identity.Name</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="~/adminLTE/img/user2-160x160.png" class="img-circle" alt="User Image" />
<p>
Marvin Perez - Founder
<small>Member since Jan. 2010</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="~/account/signout" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel (optional) -->
<!-- <div class="user-panel">
<div class="pull-left image">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p> -->
<!-- Status -->
<!-- <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div> -->
<!-- search form (Optional) -->
<!-- <form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form> -->
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">NAVIGATION</li>
<!-- Optionally, you can add icons to the links -->
<li class="active">
<!--<a href="#"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>-->
<a href="~/"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-industry"></i> <span>Accounts Receivable</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<a href="~/quotations/">Sales Quotations</a>
<!--<a href="#">Sales Quotations</a>-->
</li>
<li>
<a href="~/sales/salesorders">Sales Orders</a>
<!--<a href="#">Sales Orders</a>-->
</li>
<li>
<!--<a href="#">Sales Receipts</a>-->
<a href="~/sales/salesreceipts">Sales Receipts</a>
</li>
<li>
<!--<a href="#">Sales Invoices</a>-->
<a href="~/sales/salesinvoices">Sales Invoices</a>
</li>
<li>
<a href="~/sales/customers">Customers</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Accounts Payable</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<!--<a href="#">Purchase Orders</a>-->
<a href="~/purchasing/purchaseorders">Purchase Orders</a>
</li>
<li>
<!--<a href="#">Purchase Invoices</a>-->
<a href="~/purchasing/purchaseinvoices">Purchase Invoices</a>
</li>
<li>
<a href="~/purchasing/vendors">Vendors</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-wrench"></i> <span>Inventory Control</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<a href="~/inventory/items">Items</a>
</li>
<li>
<!--<a href="#">Inventory Control Journal</a>-->
<a href="~/inventory/icj">Inventory Control Journal</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-bank"></i> <span>Financials</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<!--<a href="#">Journal Entries</a>-->
<a href="~/financials/journalentries">Journal Entries</a>
</li>
<li>
<!--<a href="#">General Ledgers</a>-->
<a href="~/financials/generalledger">General Ledgers</a>
</li>
<li>
<!--<a href="#">Taxes</a>-->
<a href="~/tax/taxes">Taxes</a>
</li>
<li>
<!--<a href="#">Taxes</a>-->
<a href="~/financials/accounts">Accounts</a>
</li>
<li>
<a href="~/financials/banks">Banks</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-line-chart"></i> <span>Reports</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<!--<a href="#">Balance Sheet</a>-->
<a href="~/financials/balancesheet">Balance Sheet</a>
</li>
<li>
<!--<a href="#">Income Statement</a>-->
<a href="~/financials/incomestatement">Income Statement</a>
</li>
<li>
<!--<a href="#">Trial Balance</a>-->
<a href="~/financials/trialbalance">Trial Balance</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-group"></i> <span>Organization Settings</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<!--<a href="#">Company</a>-->
<a href="~/administration/company">Company</a>
</li>
<li>
<!--<a href="#">Setup</a>-->
<a href="~/administration/settings">Settings</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-desktop"></i> <span>System Administration</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
@if (User.IsInRole("SystemAdministrators"))
{
<li>
<a href="#">
Security
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu menu-open" style="display: block;">
<li><a href="~/administration/users">Users</a></li>
<li><a href="~/administration/roles">Roles</a></li>
<li><a href="~/administration/groups">Groups</a></li>
</ul>
</li>
<li>
<a href="~/administration/auditlogs">Audit Logs</a>
</li>
}
</ul>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- <section class="content-header">
<h1>
Page Header
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section> -->
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
@RenderBody()
<div class='clearfix'></div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
Powered by <a href="https://github.com/AccountGo/accountgo">AccountGo</a>
</div>
<!-- Default to the left -->
<strong>Copyright © 2018 <a href="https://github.com/AccountGo/accountgo">AccountGo</a>.</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="pull-right-container">
<span class="label label-danger pull-right">70%</span>
</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- popper.js 1.12.9 -->
<script src="~/plugins/popper.js/dist/umd/popper.js"></script>
<!-- jQuery 2.2.0 -->
<script src="~/plugins/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="~/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="~/adminLTE/js/adminlte.js"></script>
<!--AG-GRID-->
<script src="~/plugins/ag-grid/dist/ag-grid.js?ignore=notused24"></script>
<!--TODO : this is temporary solution.-->
<script>
$(document).ready(function () {
$('li').each(function () {
if (window.location.href.indexOf($(this).find('a:first').attr('href')) > -1) {
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().parent().addClass('treeview active');
}
});
});
</script>
<!--//END TODO-->
@RenderSection("scripts", required: false)
<!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. -->
</body>
</html>
Thanks, Marvin
Issue Analytics
- State:
- Created 5 years ago
- Comments:6
Top Results From Across the Web
How Can I fix a header of a specified height in the top without ...
If you set height: 40px its hight should be 40px . If you wouldn't set header 's height, its hight was 0. Another...
Read more >Height auto not working on header - HTML & CSS - SitePoint
I have a header wrapped inside of div.wrapper element. The header element doesn't adjust itself to the height to the height of the...
Read more >Why is my header div extending off the right side of the screen?
My header div extends off the right side of the screen. ... #header { background-color: #848484; height: 50px; width: 100%; margin: auto; position:...
Read more >Header height when top menu is below it - WordPress.org
Hey all. My header has the “top menu” style with the menu placed below the header. When i increase the header's height, it...
Read more >Header Navigation - Salient Documentation
Animation Effects · Header Hide Until Needed This option hides your header navigation bar after the user scrolls down the page from the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
how are u man?, look, delete ur bootstrap 4^ and install 3.
npm install bootstrap@3
resolved for me.
@bimal-srivastava , thanks for trying to help. I decided to move to CoreUI and try it for now. I like AdminLTE but already spent so much time on figuring out what’s wrong. Almost the same setup, I just like the dark theme.