We Keep Coding

Signature is not visible until after resize on modal bootstrap

At my appliction after user enter data he needs to sign,
I'm using signature-pad plugin: https://github.com/szimek/signature_pad
and put the signature in modal of bootstrap4.
The issue is that before I open the modal, the canvas inside it has size of 0x0 pixels, so I need to resizing the screen and initializing the library whene the modal is opened.
I tried send the modal-body when calculate the width.
I put width and heigth manual - dosnt work good.
<script>
$('#myModal').on('show.bs.modal', function (e) {
console.log("modal open");
resizeCanvas();
});
</script>

tnx guys, I finally got it.
I gave the modal style="display:block;"
and then by jq I change it
$(document).ready(function (){
$('#myModal').css('display','none');
});
and diabled the screen resize at signature-pad.

Scrolling issues with multiple bootstrap modals

I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal.
When I
open modal 1
click on link to open modal 2 (modal 1 stays in background)
and then close modal 2 so that I am back on modal 1
modal 1 looses scrolling (there is still a scroll bar but it doesn't do anything). Instead the modal stays in the position it was at the time of opening modal 2.
I played around with closing the background modal with js first (but that messes up scrolling on the second modal). It appears that every time I try to open/close more than one modal I always get some issue with the scrolling.
Any suggestions on how to handle this?

Add
.modal { overflow: auto !important; }
To your CCS.
Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not.
Adding that line to the CSS fixed the issue as demonstrated with this jsFiddle.
Solution taken from this thread on github which offers other solutions as well.

The solution that worked for me was:
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});

$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});

this is the solution:
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>
then the script will be:
<script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
jus add this code and work fine.

I tried the previous solutions, and not working for my use case:
just adding css .modal { overflow: auto !important; }
This will cause the content below modal become scrollable. Not good when you want to keep the previous content position. especially in mobile browser.
Use javascript to track opened modal and keep the 'modal-open' class in body element using this jQuery selector $('.modal:visible').length. This is not working when there are multiple modal opened and closed fast. I use BS modal for my ajax spinner, so the $('.modal:visible') is not accurate.
This is the working one for me:
Use JS global variable to keep track/count of opened modal; instead of just using :visible selector
And I added css style so I don't have to recalculate backdrop z-index
https://stackoverflow.com/a/63473738/423356
var bootstrapModalCounter = 0; //counter is better then using visible selector
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) {
--bootstrapModalCounter;
if (bootstrapModalCounter > 0) {
//don't need to recalculate backdrop z-index; already handled by css
//$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
$('body').addClass('modal-open');
}
}).on("show.bs.modal", function (e) {
++bootstrapModalCounter;
//don't need to recalculate backdrop z-index; already handled by css
});
});
.modal {
/*simple fix for multiple bootstrap modal backdrop issue:
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
background: rgba(0, 0, 0, 0.5);
}
This is modified fiddle from #Keeleon for the fix https://jsfiddle.net/4m68uys7/
This is github issue https://github.com/nakupanda/bootstrap3-dialog/issues/70

Add following to your CSS :
.modal
{
overflow: scroll !important;
}

Bootstrap Modal Hiding the Scrollbar

I am using Bootstrap v3.3.5. Every time a modal box is triggered, the scroller hides thereby jerking the webpage. Could you please suggest me a fix.
URL: http://goo.gl/kwn7YH The modal is triggered by the Enquiry button on the right. I tried adding cutsom JS to remove margin / padding but didn't work:
$(document).on( 'hidden.bs.modal', '.modal', function() {
$(document.body).removeClass( 'modal-scrollbar' );
}).on( 'show.bs.modal', '.modal', function() {
// Bootstrap's .modal-open class hides any scrollbar on the body,
// so if there IS a scrollbar on the body at modal open time, then
// add a right margin to take its place.
if ( $(window).height() < $(document).height() ) {
$(document.body).addClass( 'modal-scrollbar' );
}
});
})(window.jQuery);
});

Try and use
$('#myModal').hasClass('in');
and then apply 17px padding to the right of your button when its active.

How to disable scroll bar nicely?

I created this javascript function which disables the scrolling of the page content when the side menu is shown: (like a fb on mobile app)
function disableScroll(){
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
$('body').css('overflow', 'hidden');
$(window).scroll(function(){
$(this).scrollTop(top).scrollLeft(left);
});
}
However, whenever I try to scroll the side menu, the page content shows the scroll bar moving up and going back to its original position. How do I prevent that from showing cos it looks really ugly.
I tried fixed the scroll position using CSS but it will automatically bring my page to the top which is not what i want. i want it to stay at the position where the user last clicked the button for the side menu to appear.

You should also set overflow: hidden to the body element.. Then the scroll bar won't be shown at all. Return it back to the original overflow afterwards.

JQUERY
$('body').delegate('#element', 'click', function() {
$("body").css('overflow', 'hidden');
});
This could maybe fix your problem?

Change the popover location dynamically while resizing browser window

I am using Twitter Bootstrap popover and I don't know how would be able to change the popover location dinamic while resizing browser window. The problem is that when i resize the window, popover stays fixed on position. I want to delay the popover like other html elements.
Code:
$('#popover1').popover({
html : true,
content: function() {
return $("#form").html();
},
placement: "top"
});

This works for me. It calls the show event for all visible popovers:
$(window).off("resize").on("resize", function() {
$(".popover").each(function() {
var popover = $(this);
if (popover.is(":visible")) {
var ctrl = $(popover.context);
ctrl.popover('show');
}
});
});

Have a look at the following questions and answers:
Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
jQuery position element based on window resize
You need to use an event handler for the resize event:
$(window).resize(function() {
// your positioning code here
});
Within this code you must reposition your element.