我正在使用Bootstrap 4和一些带有选项卡和标题的嵌套卡。这些卡中有表格。我还使用Handlebars读取JSON数据并填充表单。
当我从硬编码数据切换到使用手把以填充表格时,除了第一张卡片以外的所有东西的边框都消失了。
Handlebars.registerHelper("incIndex",function(property){
var index = property + 1;
str = index.toString();
return str;
});
$(function() {
let template = Handlebars.compile($("#deliveries-template1").html());
let data = [{
"name": "Acme",
"city": "Seattle",
"reference": "1905421",
"units": "5",
}, {
"name": "CostLess",
"city": "Redmond",
"reference": "2105413",
"units": "1",
},{
"name": "FastRepair",
"city": "Lynden",
"reference": "1994512",
"units": "12",
}];
$('#delCard1').html(template(data));
});
答案 0 :(得分:0)
边框将应用于卡片类。您仅在包装div上使用card
类。因此只有1个边界。从要添加车把模板的div中删除card
类,然后将其添加到车把模板的each
部分中。我添加了另一个班级mb-2,以便两张卡之间有一些空间。
{{#each this}}
<div class="card mb-2">
Handlebars.registerHelper("incIndex", function(property) {
var index = property + 1;
str = index.toString();
return str;
});
$(function() {
//get custom template
var template = Handlebars.compile($("#deliveries-template1").html());
var data = [{
"name": "Acme",
"city": "Seattle",
"reference": "1905421",
"units": "5",
}, {
"name": "CostLess",
"city": "Redmond",
"reference": "2105413",
"units": "1",
}, {
"name": "FastRepair",
"city": "Lynden",
"reference": "1994512",
"units": "12",
}];
$('#delCard1').html(template(data));
});
.deliveries {
height: 500px;
width: 300px;
top: 50px;
position: fixed;
}
#delivery_mastercard {
margin-top: 50px;
margin-bottom: 0 !important;
margin-left: 25px;
margin-right: 0 !important;
width: 300px;
}
#delivery_mastercard_body {
padding-top: 5px;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#deliveryTabCard_body {
padding-top: 5px;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.delivery_card_1_body {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 10 !important;
padding-left: 10px;
padding-right: 10px;
}
.delivery_card_2_body {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 10px;
padding-right: 10px;
}
#bootstrap_overrides .form-group {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
#bootstrap_overrides .form-control {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
#bootstrap_overrides .form-control-label {
margin-top: 0;
margin-bottom: 5px;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
font-size: 10pt;
}
#deliveryTabCard {
height: 346px;
/** 346 full height **/
}
#deliveryTabCard_body {
overflow-y: auto;
}
#formGroup4 {
margin-top: 0 !important;
margin-bottom: 5px;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.delcard1 {
height: 285px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<div class="container" id="bootstrap_overrides">
<div class="row">
<div class="col-5"></div>
<!--------------- Begin Deliveries -------------------->
<div class="col-3 offset-lg-3">
<div class="card border-primary" id="delivery_mastercard">
<div class="card-header">
<h4>Deliveries</h4>
</div>
<div class="card-body" id="delivery_mastercard_body">
<div class="card" id="deliveryTabCard">
<div class="card-header" id="cheader">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#East" role="tab">East</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#West" aria-controls="contact" aria-selected="false">West</a>
</li>
</ul>
</div>
<div class="card-body" id="deliveryTabCard_body">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="East">
<div class="delcard1" id="delCard1">
<script id="deliveries-template1" type="text/x-handlebars-template">
{{#each this}}
<div class="card mb-2">
<div class="card-header">
<h6 class="del_header">East Delivery #{{incIndex @index}}</h6>
</div>
<div class="card-body delivery_card_1_body">
<form>
<div class="form-group">
<label class="form-control-label" for="formGroup1">Company</label>
<input type="text" class="form-control" id="formGroup1" value={{name}}>
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup2">City</label>
<input type="text" class="form-control" id="formGroup2" value={{city}}>
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup3">Reference</label>
<input type="text" class="form-control" id="formGroup3" value={{reference}}>
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup4">Handling Units</label>
<input type="text" class="form-control" id="formGroup4" value={{units}}>
</div>
</form>
</div>
<!-- /delivery_card_1_body (SEK)-->
</div>
{{/each}}
</script>
</div>
<!-- /delcard1 (SEK)-->
</div>
<!-- /tabpanel (SEK) -->
<div role="tabpanel" class="tab-pane" id="West">
<div class="card delcard1">
<div class="card-header">
<h6>West Delivery #1</h6>
</div>
<div class="card-body delivery_card_2_body">
<form>
<div class="form-group">
<label class="form-control-label" for="formGroup1">Company</label>
<input type="text" class="form-control" id="SEAformGroup1">
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup2">City</label>
<input type="text" class="form-control" id="SEAformGroup2">
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup3">Reference</label>
<input type="text" class="form-control" id="SEAformGroup3">
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup4">Handling Units</label>
<input type="text" class="form-control" id="SEAformGroup4">
</div>
</form>
</div>
<!-- /SEA card-body 1 -->
</div>
<!-- /SEA card 1 -->
</div>
<!-- /tabpanel (SEA) -->
</div>
<!-- /tab-content -->
</div>
<!-- /tabed-card-body -->
</div>
<!-- /deliveryTabCard -->
</div>
<!-- /delivery card-body -->
</div>
<!-- /delivery card -->
</div>
<!-- /col-3 -->
</div>
<!-- /col-5 -->
</div>
<!-- /container -->