Как исправить навбар, не меняющий размер с полным календарем? - PullRequest
Новая
       17

Как исправить навбар, не меняющий размер с полным календарем?

0 голосов
/ 03 апреля 2019

Размер моего navbar не изменится, как на всех других моих страницах, и я считаю, что это связано с полным календарем.Я пытался изменить поля и отступы, но ничего не помогло.Кажется, все стили для навигационной панели есть, но, возможно, я что-то упускаю?Любой совет?

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>

1 Ответ

0 голосов
/ 03 апреля 2019

Это проблема CSS. При использовании bootstrap.css класс «nav» вызывает отображение UL как «flex», Если принудительно изменить его на «display: block», он будет работать нормально. 

.nav {display: block !important;}

Самое главное, вы должны спланировать, какую версию начальной загрузки вы собираетесь использовать. Если это начало проекта, вы можете найти стабильную версию начальной загрузки.

Попробуйте дать уникальные имена классов, вместо 'nav', вы можете поставить как 'ulTopNav' и т. Д.

...