2
FullCalendar를 제 웹 사이트에 통합했습니다. 높이 옵션이 훨씬 더 큰 숫자로 설정된 경우에도 높이가 321px가되지 않는 것 외에는 정상적으로 작동합니다. 그러나 이는 포함 요소의 너비가 기본 설정에서 키가 더 커야하는 것과 관련이 없으므로 관련이 없습니다.fullCalendar 높이가 작동하지 않습니다.
기본 부트 스트랩 3을 사용 중입니다. 미디어 쿼리가 정상보다 크게 재설정되었지만 높이가 아니라 너비에 영향을 주며 상위 패널의 전체 너비를 렌더링합니다. 오류나 충돌에 대해 CSS를 확인했지만 아무 것도 존재하지 않는 것 같습니다. 나는 수정을하지 않았으므로, 코드를 게시하는 것으로부터 어디서부터 시작할 지조차 알지 못한다.
도움 말? 어디 론가 내가 봐야 할 곳이 있니?
$(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
관련 코드를 추가했습니다. 나는 주말에 언젠가는 바이올린을 치고 문제가 에뮬레이트되어 있는지보기 위해 노력할 것이다. – slink