Hey there, I'm having an issue where the popover that should be inside the modal is actually appearing outside of it in the top left corner, not visible within the modal itself.
Below is my index code:
<button type="button" id="example" class="btn btn-default" data-container="body"
data-toggle="popover" data-placement="right"
data-content="And here's some amazing content"
data-original-title="Hello">
<img/>
</button>
The knockoutbootstrap.js file looks like this:
$(function () {
$.ajaxSetup({ cache: false });
ko.bindingHandlers.showModal = {
init: function (element, valueAccessor) {
},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).removeData("modal").modal();
}
else {
$(element).modal('hide');
}
}
};
$('#example').popover();
var lockerLoanViewModel = new LockerLoanViewModel();
ko.applyBindings(lockerLoanViewModel);
lockerLoanViewModel.initializeViewModel();
});
I'm not sure if this will help, but here is the stylesheet:
body {
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.gridContainer {
margin-top: 30px;
}
.popover {
z-index: 1060;
position: fixed;
display:inherit;
}
If you have any questions or suggestions, please feel free to ask as I really need help with this. (Apologies for any language errors!)