My navbar won't resize as it does on all my other pages and I believe it is due to full calendar. I've tried changing margins and padding but nothing has seemed to fix it. All the styling for the navbar appears to be there but maybe I am possibly overlooking something? Any advice?
headerCalendar.php
<?php
session_start();
if(!isset($_SESSION['userid']) && empty($_SESSION['userid'])){
header('location:onSignIn.php'); // redirect to login page if user details is not set in sessions
}
?>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
margin: 20px 45px;
}
h1 {
text-align: center;
}
p {
margin: 20px 45px;
}
.responsive {
width: 100%;
height: auto;
}
body {margin: 0;}
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(119,13,41);
}
ul.nav li {float: left;}
ul.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Open Sans', Arial;
font-style: normal;
font-weight: 300;
}
ul.nav li a:hover:not(.active) {
background-color: rgb(237,235,235);
color: rgb(119,13,41);
}
ul.nav li a.active {
background-color: rgb(169,5,51);
}
ul.nav li.right
{
float: right;
}
@media screen and (max-width: 600px) {
ul.nav li.right,
ul.nav li {float: none;}
}
</style>
</head>
<ul class="nav">
<li><a href="home.php">Home</a></li>
<li><a href="myProfile.php">My Profile</a></li>
<li><a href="faq.php">Resources</a></li>
<li><a class="active" href="appointmentrequest.php">Schedule Appointment</a></li>
<li class="right"><a href="">Sign Out</a></li>
</ul>
calendar.php
<?php
$page_title = "Schedule Time";
require_once('includes/headerCalendar.php');
session_start();
//escape variables for security sql injection
$formfname = ($_POST['fname']);
$formlname = ($_POST['lname']);
$formusername = ($_POST['username']);
$formphonenum = ($_POST['phonenum']);
$formemail = ($_POST['email']);
$formroom = ($_POST['room']);
$formbuilding = ($_POST['building']);
$formissue = ($_POST['issue']);
$formdescription = ($_POST['description']);
$_SESSION['formfname'] = $formfname;
$_SESSION['formlname'] = $formlname;
$_SESSION['formusername'] = $formusername;
$_SESSION['formphonenum'] = $formphonenum;
$_SESSION['formemail'] = $formemail;
$_SESSION['formroom'] = $formroom;
$_SESSION['formbuilding'] = $formbuilding;
$_SESSION['formissue'] = $formissue;
$_SESSION['formdescription'] = $formdescription;
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<style>
h2 {
margin: 20px 45px;
}
h1 {
text-align: center;
}
p {
margin: 20px 45px;
}
.responsive {
width: 100%;
height: auto;
}
body {margin: 0;}
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(119,13,41);
}
ul.nav li {float: left;}
ul.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Open Sans', Arial;
font-style: normal;
font-weight: 300;
}
ul.nav li a:hover:not(.active) {
background-color: rgb(237,235,235);
color: rgb(119,13,41);
}
ul.nav li a.active {
background-color: rgb(169,5,51);
}
ul.nav li.right
{
float: right;
}
@media screen and (max-width: 600px) {
ul.nav li.right,
ul.nav li {float: none;}
}
body {
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
//changed editable from true to false
editable: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
//right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
minTime: '12:00:00',
maxTime: '20:00:00',
//defaultTimedEventDuration: '01:00:00',
//forceEventDuration: true,
businessHours: true,
businessHours:{
dow: [1,2,3,4,5],
start: '12:00',
end: '20:00',
},
allDaySlot: false,
longPressDelay: 450,
events: "events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = 'Reserved';
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
//allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
/*
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
*/
/*
eventClick: function(event) {
var decision = confirm("Do you really want to do that?");
if (decision) {
$.ajax({
type: "POST",
url: "delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Updated Successfully");}
});
}
},*/
/*
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
*/
});
});
</script>
<h2>Tickets</h2>
<br>
<div class='container'>
<div class='row'>
<div id='calendar''></div>
</div>
</div>
<form action="ticket_submit.php">
<input type="submit" value="Submit">
</form>
</body>
</html>
It is a CSS issue. While using bootstrap.css, "nav" class is causing UL display as "flex", If you forcefully change it to "display: block", it will work fine.
.nav {display: block !important;}
Most important, you should plan which bootstrap version you are going to use. If it is the start of a project, you may research for stable bootstrap version.
Try to give unique class names, instead of 'nav', you may put as 'ulTopNav' etc.