The result:
my code:
<html lang="en">
<head>
<% include partials/template/head.ejs %>
<% include partials/template/jsdefaults.ejs %>
</head>
<body class="<%= classname %>">
<% include partials/template/header.ejs %>
<% var prodPhotoString = "/images/products/" + product.mainImage %>
<% if (Boolean(product.camp.mainImage)) { var campPhotoString = "/images/camps/" + product.camp.mainImage } else { var campPhotoString = "/images/defaults/camp.jpg"}%>
<% var costPerHr = product.cost/product.contactHours %>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-7">
<h2><%= product.name %></h2>
<div class='prodImage' style="float:right;">
<img src="<%= prodPhotoString %>" class="img-thumbnail" width="300"/>
</div>
<h3>Price</h3>
<h4><strong>Cost:</strong> €<%= product.cost %> per place</h4>
<h4><strong>Activity Time:</strong> <%= product.contactHours %> hrs</h4>
<h4><strong>Cost per Activty Hour:</strong> <%= costPerHr.toFixed(2) %> €/hr</h4>
<h3>Dates</h3>
<h4><strong>Begins:</strong> <%= moment(product.startDate).format('MMM Do YYYY hh:mm') %></h4>
<h4><strong>Finishes:</strong> <%= moment(product.endDate).format('MMM Do YYYY hh:mm') %></h4>
<h3>Location</h3>
<h4>Toggle Map</h4>
<div class="make-switch switch-on">
<label class="sr-only" for="locSwitch">Map Toggle</label>
<input id="locSwitch" class="bootSwitch" type="checkbox" name="locSwitch" data-off-text="hide" data-on-text="show"></input>
</div>
<div style="display:none" id="map" class="embed-responsive embed-responsive-16by9">Map should be here, something broke...</div>
<h3>Places</h3>
<h4><strong>Capacity:</strong> <%= product.places.max %> people</h4>
<h4><strong>For:</strong> <%= product.ages.min %> - <%= product.ages.max %> years old</h4>
<h4><strong>Capacity:</strong> <%= product.places.max %> people</h4>
<p><%= product.description %></p>
</div>
<div class="col-sm-4">
<a href="#"><h3><%= product.camp.name %></h3></a>
<div class='campImage' style="float:right;">
<img src="<%= campPhotoString %>" class="img-thumbnail" width="120"/>
</div>
<p>
<strong>Camp Rating: </strong> <%= product.camp.stars %> stars<br>
<strong>Address: </strong> <%= product.camp.location.address.line1 %>, <%= product.camp.location.address.line2 %>, <%= product.camp.location.address.county %> <br>
<strong>Description: </strong> <%= product.camp.about %>
</p>
</div>
</div> <!--row-->
</div> <!--container-->
<% include partials/template/footer.ejs %>
<% var googurl = "https://maps.googleapis.com/maps/api/js?key=" + googapi.key %>
<script type="text/javascript" src="<%= googurl %>"></script>
<script>
$(document).ready(function () {
$(".bootSwitch").bootstrapSwitch();
$('#locSwitch').on('switchChange.bootstrapSwitch',function (event, state){
$('#map').toggle()
initMap()
})
// MAP
function initMap() {
var myLatLng = {lat: Number(<%- JSON.stringify(product.meetLocation.loc[0]) %>), lng: Number(<%- JSON.stringify(product.meetLocation.loc[1]) %>)}
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 8
});
MeetMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "My Meeting Point",
dragable: false
})
<% if (Boolean(product.finishLocation.address.county)) { console.log(product.finishLocation.address.county) %>
FinMarker = new google.maps.Marker({
position: {lat: Number(<%- JSON.stringify(product.finishLocation.loc[0]) %>), lng: Number(<%- JSON.stringify(product.finishLocation.loc[1]) %>)},
map: map,
title: "My Meeting Point",
dragable: false
})
<% } %>
}
})
</script>
</body>
</html>
The Bootstrap switch functions perfectly, but I have no Idea why it is so long. I have tried changing the attribute data-size="small" but it still does not change the length of the switch. I also tried taking out the classes make-switch and switch-on but there has been no change in the length.
Any Idea why this is happening?
EDIT: I can set give the switch <div> the following;
<div class="make-switch switch-on" style="height:40px">
but this is such a dirty workaround. It also doesn't look great.
