0

**Hi, I am trying to display a dashboard view with Codeigniter, but when I load, some of the design such as the design of header and containers are missing here is my code, I'm new in this filed, can someone please help me? what am I missing? there is no error but I'm getting a warning: DevTools failed to load SourceMap: Could not load content for http://localhost:8080/ASGB/assets/js/bootstrap.min.js.map: **

  <!DOCTYPE html>

<html>
<head runat="server">
        <title>ASGB Ticketing Tool</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="<?php echo site_url ('assets/image/favicon.png');?>"/>

        <link rel="stylesheet" href="<?php echo site_url ('assets/css/bootstrap.min.css');?>">
        <link rel="stylesheet" href="<?php echo site_url ('assets/css/bootstrap.min.css.map');?>">
        <link rel="stylesheet" href="<?php echo site_url ('assets/css/mystyle.css');?>">
        <link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');?>"> 
        <link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/css/datatables.min.css');?>">
        <link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/css/bootstrap-multiselect.css');?>">

        <!-- <script  type="text/javascript"  src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->


</head>
<body>
 
 <nav class="navbar navbar-expand-lg navbar-cus navbar-light bg-faded">
  <a class="navbar-brand waves-light" href="#">
    <img src="<?php echo site_url ('assets/image/logo.png');?>" />
  </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
       <span class="navbar-toggler-icon"></span>
     </button>
          <div class="collapse navbar-collapse navbar-mob-bar" id="navbarNav">
            <ul class="nav navbar-nav ml-auto nav-head-font">
              <li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
              <li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
              <li class="nav-item dropdown dropdown-mob" id="dropdown-mob-hide">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user" aria-hidden="true"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item"><i class="fa fa-address-book-o" aria-hidden="true"></i>My Profile</a>
                        <a href="#" class="dropdown-item"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit Profile</a>
                        <a href="#" class="dropdown-item"><i class="fa fa-key" aria-hidden="true"></i>Change Password</a>
                        <a href="#" class="dropdown-item"><i class="fa fa-handshake-o" aria-hidden="true"></i>Account Ledger</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item"><i class="fa fa-sign-out" aria-hidden="true"></i>Sign Out</a>
                    </div>
                </li>
            </ul>
        </div>
</nav>
<div class="container-fluid container-fluid-cus">
  <div class="fixed-nav">
    <div class="fixed-nav-inner open-nav">
      <ul class="text-center">
        <a href="home.html" id="menu-toggle" class="waves-light menu-toggle" data-toggle="offcanvas">
          <li>
            <i class="fa fa-dashboard"></i></li>
            <li>Menu</li>
        </a>
        <a href="company.html" class="waves-light">
          <li><i class="fa fa-briefcase"></i></li>
          <li>Company</li>
        </a>
        <a href="staff.html" class="waves-light">
          <li><i class="fa fa-user-circle"></i></li>
          <li>Staff</li>
        </a>
        <a href="projects.html" class="waves-light">
          <li><i class="fa fa-product-hunt"></i></li>
          <li>Projects</li>
        </a>
        <a href="#" class="waves-light">
          <li><i class="fa fa-ticket"></i></li>
          <li>Incidents</li>
        </a>
        <a href="settings.html" class="waves-light">
          <li><i class="fa fa-cogs"></i></li>
          <li>Settings</li>
        </a>
      </ul>
    </div>
  </div>
</div>
<div class="main-sec">
  <div class="">
    <div class="row">
        <div class="col-md-3">
          <div class="card-block">
            <div class="media">
              <div class="mr-3 card-icon-1">
                <i class="fa fa-newspaper-o font-l-1"></i>
              </div>
              <div class="media-body ml-3">
                <h3 class="font-l-1 mb-1">06</h3>
                <span>Projects</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card-block">
            <div class="media">
              <div class="card-icon-2 mr-3 card-icon-1">
                <i class="fa fa-users font-l-1"></i>
              </div>
              <div class="media-body ml-3">
                <h3 class="font-l-1 mb-1">72</h3>
                <span>Staff</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card-block">
            <div class="media">
              <div class="card-icon-3 mr-3 card-icon-1">
                <i class="fa fa-universal-access font-l-1"></i>
              </div>
              <div class="media-body ml-3">
                <h3 class="font-l-1 mb-1">10</h3>
                <span>Teams</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card-block">
            <div class="media">
              <div class="card-icon-4 mr-3 card-icon-1">
                <i class="fa fa-user-circle font-l-1"></i>
              </div>
              <div class="media-body ml-3">
                <h3 class="font-l-1 mb-1">5</h3>
                <span>Clients</span>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
  <script src="<?php echo site_url ('assets/js/jquery.min.js');?>"></script>
  <script src="<?php echo site_url('assets/js/popper.min.js');?>"></script>
  <script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo site_url('assets/js/datatables.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo site_url('assets/js/bootstrap-multiselect.js');?>"></script>
  <script src="<?php echo site_url('assets/js/jquery.steps.js');?>"></script>
  <script src="<?php echo site_url('assets/js/jquery.validate.js');?>"></script>
  <script src="<?php echo site_url('assets/js/myscript.js');?>"></script>
</body>
</html>

this is what im gettin

and this what I supposed to get

Abolfazl Panbehkar
  • 700
  • 2
  • 7
  • 21
Roxana Slj
  • 311
  • 1
  • 5
  • 23
  • From your 2nd Screenshot it appears you have it working. So apart from the warning, which has nothing to do with anything here, what is the actual issue? – TimBrownlaw Jul 08 '20 at 12:00
  • second screenshot is themy .html file here i added href="" but seems some of them can not be find – Roxana Slj Jul 08 '20 at 12:55
  • First thing you can do is View your HTML Source and inspect the CSS and JS Links. You can even click on the links of each and you'll either see the file or a file not found error. That will help track down typos/missing files.. – TimBrownlaw Jul 08 '20 at 12:58
  • This might help - https://stackoverflow.com/questions/29802037/not-linked-to-bootstrap-css-map-but-shows-in-console – sauhardnc Jul 08 '20 at 12:59
  • yes I already did , the issue is navbar and container-fluid classes are not connected to my css, its basically in line 23 to 48. which i need to add , but i dont know where to add it ? – Roxana Slj Jul 08 '20 at 13:05

1 Answers1

-1

This is a Google Chrome setting issue. The screenshot explains what you need to do. “Could not load content for ... *.map” is a Google Chrome setting issue.

  1. View your website in Chrome
  2. Press F12 to launch Google DevTools
  3. Click the Setting gear icon (top right)
  4. See ... Preferences -> Sources section
  5. uncheck [ ] Enable CSS source maps
carrabino
  • 1,742
  • 1
  • 14
  • 17