how to size a bootstrap 2.3.2 popver

Question

I am trying to insert a webpage's html into a bootstrap 2.3.2 popover using the following:

 $.ajax({
   type:"POST",
   url: "Ajax/getHtml",
   data: { u : 'http://stackoverflow.com' },
   dataType: 'html',    
   error: function(jqXHR, textStatus, errorThrown) {
     console.log('error');
     console.log(jqXHR, textStatus, errorThrown);
   }
 }).done(function(html) {
   html = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
   $link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
   $link.data('content', html);
   $(this).html($link);
   // Trigger the popover to open
   $link = $(this).find('a');
   $link.popover("show");
});

This works fine but i want to size the output down to lets say 500 x 500 pixels. I checked out:

http://getbootstrap.com/2.3.2/javascript.html#popovers

But do not see a sizing option. How can I do this?

maybe this can help you: http://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover — albciff, Feb 12 '15 at 22:02

score 0 · Answer 1 · answered Feb 14 '15 at 03:21

0

You can use popover (option "template") from Bootstrap3 http://getbootstrap.com/javascript/#popovers

Just a select popovers from JavaScript components and download it (like a jQuery plugins) http://getbootstrap.com/customize/

answered Feb 14 '15 at 03:21

Max Lipsky

1,774
1
18
29

Mike · Answer 2 · 2015-02-14T04:23:00.303

You can use the CSS max-widthand max-height properties to limit the width and height of the popover. I have provided an example of how to achieve this here: http://jsfiddle.net/z96svdbe/. To avoid having the content overflow the popover, you can set the CSS overflow-y property to auto.

The following CSS will restrict the popover to 300 x 300 pixels.

  .max-width-popover + .popover {
        max-width: 300px;
        max-height: 300px;
        overflow-y: auto;
  }

how to size a bootstrap 2.3.2 popver

2 Answers2