CODEWITHSUNDEEP
twitter-bootstrap
Reddirt
Reddirt

Reputation: 5953

Bootstrap popover width for popover-inner

I would like the have a Bootstrap Popover be wider. I read that this should work:

.popover-inner a {
   width: 600px;
}

But, the browser console still shows auto with the above code. Hard to describe. Here is a snapshot:

enter image description here

Upvotes: 42

Views: 87669

Answers (10)

GeistZero
GeistZero

Reputation: 51

Add your popover content as HTML with your own class and then in CSS file add:

.popover .own-class { width: ... }

".own-class" element width will determine popover width.

Upvotes: 0

Adam Libuša
Adam Libuša

Reputation: 735

Disable max-width in .popover:

.popover {
    max-width: none;
}

And then you can play with the size of the content more freely.

Upvotes: 3

nicorellius
nicorellius

Reputation: 4043

Some answer herein recommend just making the popover class a certain width. This is no good, because it affects all popovers. Use something like this instead, something more targeted: 

.container-div .popover {
    /* add styles here */
}

Upvotes: 2

Dhanushka
Dhanushka

Reputation: 231

1)Easy way :(warning:this will affect all popovers):

Just override the bootstrap .popover styles as below

.popover{
    max-width: 600px; 
}

2)Recommended way:

$("#a-div-id-001").popover({
    //set a custom container
    // which can minimize the displacement of popover
    //when window resizing
    container: $("#Div"),
    html : true,
    content: function() {
        return "<span>Hello there!</span>";
    },
    viewport: {
        selector: 'body',
        padding: 10
    },
    title:"Apps",
    template:'<div class="popover my-custom-class" role="tooltip">'
        +'<div class="arrow"></div><h3 class="popover-title"></h3>'
        +'<div class="popover-content"></div>'
        +'</div>'
});

First add a custom class to the popover template like above my-custom-class. Note that popover will be rendered in using the default template unless you had specified a custom template.

Then override bootstrap's .popover styles like below :

div.popover.my-custom-class{
    max-width: 600px;
}

This styles let you to have a dynamic width up to 600px. If you need to set a minimum width to the popover, just set the width option directly. see example below,

div.popover.my-custom-class{
    min-width: 600px;
}

When you increase the width, you may need to adjust the space (offset) between the popover box and the left/right page border. See the viewport property, as it sets the bounds.

Upvotes: 3

John N
John N

Reputation: 131

...
width:auto;
...

was the perfect solution in my case. I had multiple popovers on the same page and one of them has a long URL. All of them looks nice now. Thank you JFK!

Upvotes: 0

JVK
JVK

Reputation: 3912

.popover {
  max-width: 600px;
  width: auto;
}

change max-width to your desired value, You can also set min-width, if you wish

Upvotes: 24

eheydenr
eheydenr

Reputation: 1020

If you want to control the minimum width of your popover window, just add an extra line in the css (or extra css) like this:

.popover
{
    min-width: 200px ! important;
}

(replace 200px with the desired value)

Upvotes: 6

Layke
Layke

Reputation: 53136

Here's a sample initialization that I use.

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

As you can see, it uses a custom template. The template uses a custom popover-medium class.

I then have a CSS selector

.popover-medium {
    max-width: 350px;
}

You could also just set a style on the template class if you wanted.

Upvotes: 1

Mike Atlas
Mike Atlas

Reputation: 8231

There's a pull request on bootstrap to make this easier, but you can modify it using this technique of setting the template option for the popover:

$('#yourPopover').popover({
  template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})

Then you can set your popover special-class css however you like (widths and more!)

Upvotes: 26

lbdm44
lbdm44

Reputation: 648

Based off of what I have in my bootstrap.css file, the default is a max-width property.

I use this

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 600px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

and it works exactly how you intended it to.

My bootstrap.css files does not contain a popover-inner a css selector at all though

Upvotes: 50

Related Questions