I am developing this site in laravel and I am having troubles when I try to use DataTables, for my design I am using AdminLTE and whenever I try to put datatables on the content the search bar, the page selector, the order by icons disappear. I am following the example ahead: https://datatables.net/examples/styling/bootstrap. The cdn's for this datatable deforms my adminLTE. https://i.imgur.com/6fY7tMF.png
I've already tried to change cdn but I don't really think that that is the problem here.
------------------------HEAD--------------------------------
<head>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name') }}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet">
</head>
------------------------BODY--------------------------------
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Gestão de Utilizadores
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
#yield('content')
<div class="table-reponsive box">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>Empresa</th>
<th>Conta</th>
<th>EDITAR</th>
<th>APAGAR</th>
</tr>
</thead>
<tbody>
#foreach($utilizadores as $utilizador)
<tr>
<td>{{ $utilizador->id }}</td>
<td>{{ $utilizador->username }}</td>
<td>{{ $utilizador->password }}</td>
<td>{{ $utilizador->empresa }}</td>
<td>#if($utilizador->type == 1) <b>Admin</b> #else User Normal #endif</td>
<td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
<td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
</tr>
#endforeach
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
I expect something like the example ('https://datatables.net/examples/styling/bootstrap'). When I am actually having this: https://i.imgur.com/Wnt7tcn.png
Related
I am using AdminBSB template for practice, and Jquery datatable plugin JS not working in my blade template
I want to make datatable looks like this:
but exportable, search, and pagination function in mytable not working like this:
this is sample of my code for script:
posts/index.blade.php:
<x-admin-master>
#section('content')
<!-- T A B E L --->
<div class="container-fluid">
<div class="block-header">
<h2>
JQUERY DATATABLES USER
<small>Taken from datatables.net</small>
</h2>
</div>
<!-- Exportable table Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
All Post
</h2>
</div>
<div class="body">
<div class="table-responsive">
<table id="tableCategory" class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</thead>
<tfoot>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Basic Examples -->
</div>
<!-- END - T A B E L --->
#endsection
#section('scripts')
<!-- Jquery DataTable Plugin Js -->
<script src="{{asset('plugins/jquery-datatable/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.flash.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/jszip.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.print.min.js')}}"></script>
#endsection
</x-admin-master>
admin-master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Welcome To | Bootstrap Based Admin Template - Material Design</title>
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="{{asset('plugins/bootstrap/css/bootstrap.css')}}" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="{{asset('plugins/node-waves/waves.css')}}" rel="stylesheet" />
<!-- Animation Css -->
<link href="{{asset('plugins/animate-css/animate.css')}}" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="{{asset('plugins/morrisjs/morris.css')}}" rel="stylesheet" />
<!-- Custom Css -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="{{asset('css/themes/all-themes.css')}}" rel="stylesheet" />
<!-- JQuery DataTable Css -->
<link href="{{asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css')}}" rel="stylesheet">
<!-- Bootstrap DatePicker Css -->
<link href="{{asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
<!-- Wait Me Css -->
<link href="{{asset('plugins/waitme/waitMe.css')}}" rel="stylesheet" />
<!-- Bootstrap Select Css -->
<link href="{{asset('plugins/bootstrap-select/css/bootstrap-select.css')}}" rel="stylesheet" />
<!-- Dropzone Css -->
<link href="{{asset('plugins/dropzone/dropzone.css')}}" rel="stylesheet">
<!-- Toastr Css -->
<link href="{{asset('css/toastr.min.css')}}" rel="stylesheet">
</head>
</head>
<body class="theme-red">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<x-admin.top-nav.admin-top-navbar></x-admin.top-nav.admin-top-navbar>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<x-admin.left-nav.admin-left-navbar></x-admin.left-nav.admin-left-navbar>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<x-admin.right-nav.admin-right-navbar></x-admin.right-nav.admin-right-navbar>
<!-- #END# Right Sidebar -->
</section>
{{-- <section class="content"> --}}
<div class="container-fluid">
<section class="content">
#yield('content')
</section>
</div>
{{-- </section> --}}
<!-- Jquery Core Js -->
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<!-- Bootstrap Core Js -->
<script src="{{asset('plugins/bootstrap/js/bootstrap.js')}}"></script>
<!-- Select Plugin Js -->
<script src="{{asset('plugins/bootstrap-select/js/bootstrap-select.js')}}"></script>
<!-- Slimscroll Plugin Js -->
<script src="{{asset('plugins/jquery-slimscroll/jquery.slimscroll.js')}}"></script>
<!-- Waves Effect Plugin Js -->
<script src="{{asset('plugins/node-waves/waves.js')}}"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="{{asset('plugins/jquery-countto/jquery.countTo.js')}}"></script>
<!-- Morris Plugin Js -->
<script src="{{asset('plugins/raphael/raphael.min.js')}}"></script>
<script src="{{asset('plugins/morrisjs/morris.js')}}"></script>
<!-- ChartJs -->
<script src="{{asset('plugins/chartjs/Chart.bundle.js')}}"></script>
<!-- Flot Charts Plugin Js -->
<script src="{{asset('plugins/flot-charts/jquery.flot.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.resize.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.pie.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.categories.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.time.js')}}"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="{{asset('plugins/jquery-sparkline/jquery.sparkline.js')}}"></script>
<!-- Custom Js -->
<script src="{{asset('js/admin.js')}}"></script>
<script src="{{asset('js/pages/index.js')}}"></script>
<!-- Demo Js -->
<script src="{{asset('js/demo.js')}}"></script>
#yield('scripts')
</body>
</html>
I got this issue before. I changed
#section('scripts') ... #endsection
to
#push('scripts') ... #endpush
In admin-master.blade.php, I changed:
#yield('script') to #stack('script')
Im trying to get datatables to work for a basic table
This is my error
Below is my layouts file, where i include the script tags and css tags / they are noted
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- font awesome icon kit - check favourite tabs in chrome to get more -->
<script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name', 'Coffee')}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="../css/app.css">
<!-- ck editor cdn-->
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<!-- Datatables link -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body style="background-color: lightgrey !important;">
#include('inc.admin_navbar')
<div class="container">
#yield('content')
#if(session('success_message'))
<div class="alert alert-success">
{{session('success_message')}}
</div>
#endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
#include('sweetalert::alert')
</body>
</html>
Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested
<table id="datatable" class="table table-striped table-hover">
<htead>
<th>ID</th>
<th>Name</th>
<th>Date Joined</th>
<th></th>
</htead>
<tbody>
#foreach($posts as $post)
<tr>
<th>{{$post->id}}</th>
<th>{{$post->title}}</th>
<th>{{$post->created_at}}</th>
<th>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
</div>
</div>
</th>
</tr>
#endforeach
</tbody>
</table>
Here is the js at the bottom on the file
<script type="text/javascript">
$(document).ready(function () {
//linked to our main table - js function
var table = $('#datatable').DataTable();
})
</script>
please include Jquery before datatable load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Include jQuery into your code, right after body tag ends </body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I have integrated reactjs in my laravel application and it works well in order to fetching data using api's. But the layout of the view has been broken. I am using a template which was working fine before adding react js. Here it looks like:
A big space from top is appearing in every page even where i haven't use react component. My codes are:
master.blade.php
<!DOCTYPE html>
<html class="no-js h-100" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ config('app.name', 'BVend') }}</title>
<meta name="description" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
<link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" href="{{asset('template/styles/shards-dashboards.1.1.0.min.css')}}">
<link rel="stylesheet" href="{{asset('template/styles/extras.1.1.0.min.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/app.css')}}" type="text/css">
</head>
<body class="h-100">
<div class="container-fluid">
<div class="row">
<!-- Main Sidebar -->
#yield('sidebar')
<!-- End Main Sidebar -->
<main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
<!-- Main Navbar -->
#include('layouts.nav')
<!-- / .main-navbar -->
<div class="main-content-container container-fluid px-4">
<div class="page-header row no-gutters py-4">
<div class="col-12 col-sm-4 text-center text-sm-left mb-0">
<span class="text-uppercase page-subtitle">#yield('subtitle')</span>
<h3 class="page-title">#yield('title')</h3>
</div>
</div>
#yield('content')
</div>
</main>
</div>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/shards-ui#latest/dist/js/shards.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sharrre/2.0.1/jquery.sharrre.min.js"></script>
<script src="{{asset('template/scripts/extras.1.1.0.min.js')}}"></script>
<script src="{{asset('template/scripts/shards-dashboards.1.1.0.min.js')}}"></script>
<script src="{{asset('template/scripts/app/app-blog-overview.1.1.0.js')}}"></script>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
content.blade
#section('content')
<div class="row">
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="{{ route('show_machines') }}">All Machines</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="{{ route('create_machine') }}">Create Machine</a>
</li>
</div>
<div class="card-body p-0 pb-3 text-center">
<div id='app'></div>
</div>
</div>
</div>
</div>
#endsection
app (React)
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Locker extends Component {
constructor() {
super();
this.state = {
lockers: [
{
"id": 1,
"machine_id": 1,
"product_id": 0
},
{
"id": 2,
"machine_id": 1,
"product_id": 0
},
{
"id": 3,
"machine_id": 1,
"product_id": 0
},
]
}
}
render() {
return (
<div>
<table className="table mb-0">
<thead className="bg-light">
<tr>
<th scope="col" className="border-0">Locker No.</th>
<th scope="col" className="border-0">Product</th>
</tr>
</thead>
<tbody>
{this.state.lockers.map((locker, key) =>
(
<tr key={key}>
<td>{locker.id}</td>
<td>{ locker.product_id }</td>
</tr>
)
)}
</tbody>
</table>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Locker />, document.getElementById('app'));
}
after aside main is misplaced
Ok i have figured it out. I have included css from reactjs preset which also include bootstrap.css which i have included before. so removed the following line from master.blade.php and all set:
<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
I was following this and more articles:
How to display a loading html page while site content loads?
and this here: my favourite:
`https://codepen.io/mimoYmima/pen/fisgL`
My problem is that if I copy and paste it 1:1 my loading page doesn't fade away but if the site is already in cache it doesn't show it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Dexter" content="">
<title>Code-Unknown</title>
<!-- ============ GOOGLE FONTS ============ -->
<link href='font-awesome/fonts/Raleway.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Open+Sans.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Iceberg.css' rel='stylesheet' type='text/css'>
<!-- CSS -->
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!-- Custom styles CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap v3.3.1 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Favicons -->
<link rel="shortcut icon" href="images/Code-Unknown.ico">
<!-- Css 2.0 -->
<link rel="stylesheet" href="client-login/assets/css/form-elements.css">
<link rel="stylesheet" href="client-login/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="client-login/assets/css/sweetalert.css">
<link href="assets/css/please-wait.css" rel="stylesheet">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client-login/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client-login/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client-login/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="client-login/assets/ico/apple-touch-icon-57-precomposed.png">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<!-- HEADER -->
<header id="top">
<canvas id="constellation"></canvas>
<div class="welcome">
<div class="logo"><img src="images/logo.png" width="190" height="190" alt=""> </div>
<h1>WELCOME</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<div class="social-login-buttons">
<a class="btn btn-link-2" href="">
<i class="fa fa-steam"></i> Steam
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-server"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
</div>
</div>
</div>
<p> </p>
</div>
</header>
<!-- END HEADER -->
<!-- END FOOTER -->
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- CountDown -->
<script src="js/jquery.countdown.js"></script>
<!-- Validate form -->
<script src="js/jquery.validate.js"></script>
<!-- Scroll Reveal -->
<script src="js/scrollReveal.js"></script>
<!-- Youtube Player -->
<!-- Smooth-scroll -->
<script src="js/smooth-scroll.js"></script>
<!-- Ajax chimp -->
<script src="js/jquery.ajaxchimp.js"></script>
<!-- TweenLite -->
<script src="js/TweenLite.min.js"></script>
<!-- EasePack -->
<script src="js/EasePack.min.js"></script>
<!-- rAF -->
<script src="js/rAF.js"></script>
<!-- Constellation -->
<script src="js/constellation.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
<!-- right click off -->
<script src="js/rightclickoff.js"></script>
<!-- loading -->
<script src="js/loading.js"></script>
</body>
</div>
</html>
Try this one
$(function() { // waiting for the page to bo be fully loaded
$('#preloader').fadeOut('slow', function() { // fading out preloader
$(this).remove(); // removing it from the DOM
});
});
#preloader {
width: 100vw; /* viewport width */
height: 100vh; /* viewport height. You can use percents, though. It requires your html and body to be 100% x 100% too */
position: fixed;
background: #333 url(http://files.mimoymima.com/images/loading.gif) center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
We also need your markup to narrow down your issue.