2
因此，我將FullCalendar整合到我的網站中，除了高度選項設置爲更大的數字以外，它不會超過321px。然而，這是不相關的，因爲包含元素的寬度使得默認設置應該使其更高。fullCalendar高度不起作用
我使用的是基本引導程序3，媒體查詢重置爲比正常大 - 但這會影響寬度，而不是高度，並且呈現父面板的全寬度。我已經檢查過我的CSS是否有任何錯誤或衝突，但似乎都不存在。我甚至不知道從哪裏開始發佈代碼，因爲我沒有做任何修改。
幫助？我應該看的任何地方？
這裏的JavaScript的網站部分定製：
$(document).ready(function(){
// $('#calendarThumb').DataTable();
// $('#eventCalendar').DataTable({paging: false, ordering: false, info: false, lengthChange: false, searching: false });
$("#eventCal").fullCalendar({
googleCalendarApiKey: 'xxxx',
eventSources: [
{
googleCalendarId: '[email protected]'
},
{
googleCalendarId: '[email protected]'
}
]
});
$("#thumbCal").fullCalendar({
googleCalendarApiKey: 'xxxx',
eventSources: [
{
googleCalendarId: '[email protected]'
},
{
googleCalendarId: '[email protected]'
}
]
});
$(".list-group-item").click(function(event) {
$(".list-group-collapse").collapse('hide');
});
var table = $('#datatable').DataTable({ordering: true, paging: true });
var tt = new $.fn.dataTable.TableTools(table);
$(tt.fnContainer()).insertBefore('div.dataTables_wrapper');
$(function() { $("[data-toggle='tooltip']").tooltip(); });
$('#imgModal').modal({'backdrop': true});
});
$('.carousel').carousel({
interval: 7000
});
function modalPop(id) {
var src = $(id).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
$('#imgModal').modal();
$('#imgModal').on('shown.bs.modal', function(){
$('#imgModal .modal-body').html(img);
});
$('#imgModal').on('hidden.bs.modal', function(){
$('#imgModal .modal-body').html('');
});
};
$('.modalLink').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" src="'+url+'"></iframe>');
});
$('#myModal').on('show.bs.modal', function() {
$(this).find('.modal-dialog').css({
width:'85%x', //choose your width
height:'98%',
'padding':'0'
});
$(this).find('.modal-content').css({
height:'100%',
'border-radius':'0',
'padding':'0'
});
$(this).find('.modal-body').css({
width:'auto',
height:'100%',
'padding':'0'
});
})
和頁面代碼：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.testsite.com/resources/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.testsite.com/couch/addons/data-bound-form/datetime.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="http://www.testsite.com/resources/css/lavish-css.css">
<!--<link rel="stylesheet" href="http://www.testsite.com/resources/css/calendar.css">-->
<link rel="stylesheet" href="http://www.testsite.com/resources/css/jquery.smartmenus.bootstrap.css">
<link href="http://www.testsite.com/resources/css/icon-styles.css" rel="stylesheet">
<link href="http://www.testsite.com/resources/fullcalendar/fullcalendar.min.css" rel="stylesheet">
<link href="http://www.testsite.com/resources/fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link href="http://www.testsite.com/events_rss.php" rel="alternate" type="application/rss+xml" title="Upcoming Events at GCHRL">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<!--[if IE]
.navbar-nav > li {
float: left;
}
navbar-form .input-group-btn,
.navbar-form .input-group-addon {
width: auto;
}
<![endif]-->
</style>
<style>
body {
padding-top: 64px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
div.c-wrapper{
width: 95%; /* for example */
height: 500px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
margin: auto;
}
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.navbar > .n-wrapper {
width: 98%;
}
.carousel_item {
height: 500px;
width: 800px;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.modal-dialog {
position: absolute;
left: 50%;
left-margin: -300px;
}
</style>
</head>
<body>
<div class="container-fluid">
<cms:embed 'menu.html' />
<div class='panel panel-primary'>
<div class="panel-body">
<cms:if k_is_page || k_is_archive || k_is_folder>
<cms:embed 'cal_archive.html' />
<cms:else />
<div id="eventCal" ></div>
</cms:if>
</div>
<div class='panel-footer'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://www.testsite.com/resources/js/bootstrap.min.js"></script>
<script src="http://www.testsite.com/resources/js/jquery.smartmenus.bootstrap.min.js"></script>
<script src="http://www.testsite.com/resources/js/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/lib/moment.min.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/lib/jquery-ui.custom.min.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/fullcalendar.min.js"></script>
<script src="http://www.testsite.com/resources/fullcalendar/gcal.js" ></script>
<script src="http://www.testsite.com/resources/js/custom.js"></script>
</div>
</div>
</div>
</body>
您需要在問題中添加相關代碼，並在可能的情況下模擬JS Fiddle或Bootply上的問題。 – MattD 2014-11-21 22:10:09
我加了相關的代碼。我會盡量在週末的某個時候做一個小提琴，看看這個問題是否在那裏效仿。 – slink 2014-11-22 05:28:54