我正在 Iframe 中加载 View 。但是当它呈现其中包含数据表的 View 时，滚动条没有显示，因此我无法在 IFrame 中看到表格的其余部分。我的代码如下:
查看导航:
<style>
.scroller {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
/* The style for iframe varies */
.scroller iframe {
height: 250px;
width: 100%;
}
</style>
<script>
function go(location) {
document.getElementById('main_frame').src = location;
}
</script>
<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Pier Capitan</a>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<?php foreach($links as $link){ ?>
<li>
<a href="javascript:void(0)" onclick="go('<?php echo base_url().$link->access_rights ?>')"><?php echo strtoupper($link->access_rights) ?></a>
</li>
<?php } ?>
</ul>
</nav><!-- end of navbar collapse -->
</div><!-- end of navbar header -->
</header>
<body style="overflow-y:scroll;"">
<div class="col-md-12">
<div class="scroller">
<iframe src="about:blank" id="main_frame" frameborder="0" scrolling="yes"></iframe>
</div>
</div>
</body>
购买 View :
<header class="navbar navbar-defualt navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a href="#" class="navbar-brand">Purchases</a> -->
<a href="#" class="pull-left">Logout</a>
<br>
<div class="row">
<div id="main" class="col-md-12">
<h3>Purchase Window</h3>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Add New Purchases
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>The titles are block, so you don't have to click the text part to activate it</li>
<li>Indicators for expand / collapsing items</li>
<li>Removed title links' obnoxious :hover underlinings, and outlines.</li>
</ul>
</div>
</div>
</div><!-- end of panel -->
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
View Purchased Items
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<table id="table_purchased" class="table table-striped table-bordered table-condensed col-md-12" cellspacing="0" width="100%">
<thead>
<tr>
<th width="50px;">Id</th>
<th width="200px;">Item Name</th>
<th width="50px;">Amount</th>
<th width="100px;">Date Added</th>
<th width="100px;">Added By</th>
<th width="50px;">Transaction</th>
<th width="100px;">Branch</th>
<th width="100px;">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($purchases as $purchase) { ?>
<tr>
<td><?php echo $purchase->id ?></td>
<td><?php echo $purchase->item_id ?></td>
<td><?php echo $purchase->amount ?></td>
<td><?php echo $purchase->date_added ?></td>
<td><?php echo $purchase->added_by ?></td>
<td><?php echo $purchase->trans_type ?></td>
<td><?php echo $purchase->branch_id ?></td>
<td>
<button class="btn btn-warning" onclick="edit_order(this)"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" onclick="delete_order(<?php echo $purchase->id; ?>)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end of panel group -->
</div><!-- end of main-->
</div><!-- end of row -->
</div> <!-- end of header -->
</div> <!-- end of container -->
</header>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/chart.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-ui.min.js');?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_purchased').DataTable({
"order":[[0,"desc"]],
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 2 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 2, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 7 ).footer() ).html(
'Php '+parseFloat(pageTotal).toFixed(2)+' ( Php '+ parseFloat(total).toFixed(2) +' total)'
);
}
});//end of DataTable
});
</script>
“view_navigation”包含加载“purchase_view”的 IFrame。 非常感谢您的帮助。
最佳答案
这是什么请正确关闭标签:
<div class="col-md-12 scroller">
<body style="overflow-y:scroll;>
<iframe src="about:blank" id="main_frame" frameborder="0" scrolling="yes"></iframe>
</div>
</body>
试试这段代码:
<body style="overflow-y:scroll;>
<div class="col-md-12">
<div class=" scroller">
<iframe src="about:blank" id="main_frame" frameborder="0" scrolling="yes"></iframe>
</div>
</div>
</body>
.scroller iframe {
height: 250px;
width: 100%;
}
关于html - IFrame 中的滚动条不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41422750/