VSri58 VSri58 - 6 months ago 71
HTML Question

bootstrap: Image inside the popover is extending beyond the window size

I am currently using Bootstrap 3 popover feature for displaying a legend on click of a button

The legend is an image file and I want to display that image inside the popover window

But the image width is extending beyond the popover window width

Even on giving the width property does not change the popover window width.

Your help would be much appreciated.

HTML

<button id="btnLegend" class="btn btn-warning" data-toggle="popover">Legend</button>


Javascript

$(function () {
$('#btnLegend').popover(
{'placement':'bottom',
'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
'title':'Popup Test',
'html':true,
'container':'body'
}
);
});


Here is my fiddle

Answer

You should add width to img tag

Here is the example

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\" style='width:100%' >",
         'title':'Popup Test',
         'html':true
        }
    );
});

If you do not want to change the width of the image to be fixed then change the max-width of popover

.popover{

    max-width:1000px !important;
}

Here is the link to the updated fiddle