BS popover only content scrollable with arrow

[akshaykosmos]

Hello guys,
I have a bootstrap popover whose popover-content i need scrollable but it does not work. Making the whole popover scrollable works but then the popover arrow goes missing. I am using a template because i want to remove the padding of popover-content for this popover only. i have multiple popovers on my page.

Below is my fiddle

Edit fiddle - JSFiddle - Code Playground

Thanks.

[PaulOB]

You will need to add a height to match the area that you want to scrol in the popover-content element.

e.g.

<div class="popover-content" style="padding:0px;overflow-y:auto;height:164px">

[akshaykosmos]

Thanks Paul its working as expected. There is one more issue I am facing.
I am loading the content from an ajax call. Below is the code for it.

$(document).ready(function(){
        $('#npop').popover({
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content" style="padding:0px;overflow-y:auto;max-height:450px;"><p></p></div></div></div>',
        html: true,
    	placement: 'bottom',
    	title: 'Notifications',
    	content: function(){
	        var div_id =  "tmp-id-" + $.now();
	        return details_in_popup(div_id);
	    	}
        });
});
    function details_in_popup(div_id){
 	    $.ajax({
    	    url: "<?php echo base_url('pull_notify'); ?>",
        	success: function(response){
            $('#'+div_id).html(response);
        	}
    	});
    	return '<div id="'+ div_id +'">Loading...</div>';
	}

This works as expected except the popover is pointing to another popover which i have on the same page. However when i add a static content the popover the arrow and popover placement is proper.

Thanks.

[PaulOB]

I’ve moved the thread to the JS forum as this is now a js question and you’ll get a better answer here

[akshaykosmos]

Thanks Paul

[akshaykosmos]

Ok Solved the issue.
Changed the return div with

return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';

Apparently the fix was adding a style to the div with a specified width and some css changes in template.
Below is the code

$('#npop').popover({   
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content" style="padding:0px;overflow-y:auto;max-height:450px; width: 400px"><p></p></div></div></div>',     
        html: true,
    	placement: 'bottom',
    	title: 'Notifications',
    	content: function(){
	        var div_id =  "tmp-id-" + $.now();
	        return details_in_popup(div_id);
	    	}
        });
});
    function details_in_popup(div_id){
 	    $.ajax({
    	    url: "<?php echo base_url('pull_notify'); ?>",
        	success: function(response){
        		
            $('#'+div_id).html(response);
        	}
    	});
    	return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';
	}

PS: I am also using the below css,

.popover{
   	 max-width: 600px !important;
   	 max-height: 500px !important;
   	 
   }
   .popover div{
   	overflow-x: hidden !important;
   }