Hey there, I'm facing an issue with the button positioning. I really need the button to be placed at the bottom of the well, but for some reason, it keeps showing up next to the image instead.
This is what's happening: the button is ending up beside the image, but I want it to be at the bottom of the well. https://i.sstatic.net/Z7Xy8.png
Below are the code snippets that I've been working with:
<div class="container">
<h2 class="center">CTTS Data</h2>
<div class="row">
<div class="col-md-12 col-sm-12" id="CTTSData">
<script>
$.ajax({
url : "CR_Data/CTTS_Data.json",
type : "post",
contentType:"application/json",
success : function(list){
var divCol = "<div class='col-sm-4 col-md-4'>";
var divWell = "<div class='well' style='position:relative'>";
var divClose = "</div>";
console.log(list);
list.forEach(function(obj, index) {
//console.log(obj);
var title = "<h5>" + obj.title + "</h5>";
var linkStart = "<a href='" + obj.imagePath + "' target='_blank'>" ;
var image = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='"
+ obj.imagePath + "' height='100%' width='100%'/>"
var linkEnd = "</a>";
var linkFile = "<a class='btn btn-danger' id='btnView' href='" + obj.filePath + "'>Open File</a>";
var div = divCol +
divWell +
title +
linkStart +
image +
linkEnd +
linkFile +
divClose +
divClose;
$("#CTTSData").append(div); // inserting the newly created div
})
}
});
</script>
</div>
</div>
</div>
<!-- /.container -->
CSS:
#btnView{
position: absolute;
margin-bottom: 20px;
}