i am using the materialize framework for my front-end design but when its load initially all looks good but when i return to index there comes the problem with the alignment when i clear the cookies it looks good
This is how its looking
This is the orginal Expected Output.
Can anyone help to resolve the Issuie
<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="<?php echo base_url('assets/') ?>css/materialize.css" rel="stylesheet">
<link href="<?php echo base_url('assets/') ?>css/slippry.css" rel="stylesheet">
<link rel="shortcut icon" href="<?php echo base_url('assets/images/logo/favicon.ico'); ?>" type="image/x-icon">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/'); ?>js/materialize.js"></script>
<title>Tolle Exam No.1 Exam Platform for Nursing Exam | RAILWAY Exam</title>
</head>
<style type="text/css" media="screen">
.morecontent span {
display: none;
}
.morelink {
display: block;
}
nav ul li:hover {
background-color: #00ffbf;
}
.input-field input:focus + label {
color: orange !important;
}
.input-field input:focus {
border-bottom: 1px solid orange !important;
box-shadow: 0 1px 0 0 orange !important
}
#viewMore{
display: none;
}
.dropdown-content {
background-color: #FFFFFF;
margin: 0;
display: none;
min-width: 300px; /* Changed this to accomodate content width */
max-height: auto;
margin-left: -1px; /* Add this to keep dropdown in line with edge of navbar */
overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
opacity: 0;
position: absolute;
white-space: nowrap;
z-index: 1;
will-change: width, height;
}
#hv:hover{
border-radius: 1px solid blue;
}
</style>
<body oncontextmenu="return false;">
<!-- Dropdown Structure -->
<!-- <ul id="dropdown1" class="dropdown-content">
<li><a href="<?php echo base_url('exam/12'); ?>" class="black-text">ALL</a></li>
<li><a href="<?php echo base_url('exam/12'); ?>" class="black-text">JEE MAIN</a></li>
<li><a href="<?php echo base_url('exam/12'); ?>" class="black-text">KERALA PSC</a></li>
<li><a href="<?php echo base_url('exam/12'); ?>" class="black-text">RAILWAY EXAMS</a></li>
</ul>
<nav style="height: 80px; padding: 10px;" class="white">
<div class="nav-wrapper ">
<a href="<?php echo base_url(''); ?>" class="brand-logo black-text">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="<?php echo base_url('institutions'); ?>" class="black-text">Home</a></li>
<li><a class="dropdown-trigger black-text" href="#!" data-target="dropdown1">Competative Exams<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a href="<?php echo base_url('institutions'); ?>" class="black-text">Institution Exams</a></li>
<li><a href="<?php echo base_url('institutions'); ?>" class="black-text">Notifications</a></li>
<li><a href="<?php echo base_url('login'); ?>" class="btn btn-large orange lighten-2" title="" style="border-radius: 30px;">Login / Register <i class="material-icons right">lock</i></a></li>
</ul>
</div>
</nav> -->
<nav style="height: 100px; padding: 15px;" class="white">
<div class="nav-wrapper white darken-3">
<a href="<?php echo base_url(); ?>" class="brand-logo black-text" style="padding-left:25px;"><img src="<?php echo base_url('assets/images/logo/tolle_logo2.png'); ?>" style="height:80px;" alt="logo"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse black-text"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="<?php echo base_url(''); ?>" class="black-text" >Home</a></li>
<li><a id="hv" class="dropdown-button black-text" href="#!" data-activates="dropdown" data-beloworigin="true">Competitive Exams<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="hv" href="<?php echo base_url('ins_view'); ?>" class="black-text">Institution Exams</a></li>
<li><a id="hv" href="<?php echo base_url('notification/show_notification1'); ?>" class="black-text">Notifications</a></li>
<!-- Dropdown Trigger -->
<?php if($_SESSION['logged_in']==FALSE){ ?>
<a href="<?php echo base_url('login'); ?>" class="btn btn-large orange lighten-2" title="" style="border-radius: 30px;">Login / Register <i class="material-icons right">lock</i></a>
<?php }else{ ?>
<a class="black-text" title="Dashboard" href="<?php echo base_url('admin/dashboard'); ?>">Welcome: <?php echo $_SESSION['name']; ?></a>
<a href="<?php echo base_url('logout'); ?>" class="btn btn-large orange lighten-2" title="" style="border-radius: 30px;">Logout <i class="material-icons right">lock_open</a>
<?php } ?>
</ul>
</div>
</nav>
<ul id="dropdown" class="dropdown-content collection">
<li class="collection-item">
<a href="<?php echo base_url('exam/ALL'); ?>" >
<span class="title black-text">ALL EXAMS</span>
</a>
</li>
<?php foreach($categories as $cat): ?>
<li class="collection-item">
<a href="<?php echo base_url('exam/'.$cat['name']); ?>" >
<span class="title black-text"><?php echo $cat['name']; ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="<?php echo base_url(''); ?>" class="black-text" >Home</a></li>
</li>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Competitive Exams</div>
<?php foreach($categories as $cat): ?>
<div class="collapsible-body">
<a href="<?php echo base_url('exam/'.$cat['name']); ?>" >
<span class="title blue-text" ><?php echo $cat['name']; ?></span>
</a>
</div>
<?php endforeach; ?></li></ul>
<li><a id="hv" href="<?php echo base_url('ins_view'); ?>" class="black-text">Institution Exams</a></li>
<li><a id="hv" href="<?php echo base_url('notification/show_notification1'); ?>" class="black-text">Notifications</a></li>
<!-- Dropdown Trigger -->
<?php if($_SESSION['logged_in']==FALSE){ ?>
<a href="<?php echo base_url('login'); ?>" class="btn btn-large orange lighten-2" title="" style="border-radius: 30px;">Login / Register <i class="material-icons right">lock</i></a>
<?php }else{ ?>
<a class="black-text" title="Dashboard" href="<?php echo base_url('admin/dashboard'); ?>">Welcome: <?php echo $_SESSION['name']; ?></a>
<li></li><a href="<?php echo base_url('logout'); ?>" class="btn btn-large orange lighten-2" title="" style="border-radius: 30px;">Logout <i class="material-icons right">lock_open</a>
<?php } ?>
</ul>
<!-- Dropdown Structure -->
Above is my Header File
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript" src="<?php echo base_url('assets/') ?>js/slippry.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/') ?>js/readmore.js"></script>
<script>
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<script>
(function($) {
$(function() {
$('#article').readmore({
speed: 75,
lessLink: '<a href="#">Read less</a>'
});
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
hover: true, // Activate on hover
belowOrigin: true, // Displays dropdown below the button
alignment: 'right' // Displays dropdown with edge aligned to the left of button
}
);
}); // End Document Ready
})(jQuery); // End of jQuery name space
</script>
<?php
if( $this->session->flashdata('msg') ){
?>
<?php echo '<script>Materialize.toast("'.$this->session->flashdata('msg').'", 3000)</script>' ?>
<?php } ?>
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown-trigger").dropdown();
$('.carousel.carousel-slider').carousel();
$('.collapsible').collapsible();
$('.button-collapse').sideNav();
$('.modal').modal();
$("#trigg").click(function(){
$("#viewMore").slideToggle("slow");
});
});
</script>
<script>
// count=0;
// $(document).ready(function() {
// var hidden, visibilityState, visibilityChange;
// if (typeof document.hidden !== "undefined") {
// hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
// } else if (typeof document.msHidden !== "undefined") {
// hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
// }
// var document_hidden = document[hidden];
// document.addEventListener(visibilityChange, function() {
// if(document_hidden != document[hidden]) {
// if(document[hidden]) {
// // Document hidden
// alert('hidden');
// count++;
// } else {
// // Document shown
// alert('Revoked');
// if(count ==3){
// alert('Exceeded the Limit');
// }
// }
// document_hidden = document[hidden];
// }
// });
// });
</script>
<script>
function startExam(url) {
params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
params += ', resizable=no';
newwin=window.open(url,'FullWindowAll', params);
if (window.focus) {newwin.focus()}
return false;
}
jQuery('#out-of-the-box-demo').slippry();
</script>
<script>
$(document).ready(function(){
$('.modal').modal();
});
</script>
</body>
</html>
THis is the footer
