Increase the width of the popover

Question

I am trying to show a popover on Mouse over. The problem I am having is to increase the size of the popover box.

Here is the Plunker

I tried to adjust the width using css as shown below :

    .popover-inner {
width: 400px;
}
 .popover-content {
width: 500px;
}

but didn't help.

Possible duplicate of [UI Bootstrap Popover: change width](http://stackoverflow.com/questions/29005345/ui-bootstrap-popover-change-width) — 3rdthemagical, Aug 11 '16 at 23:06
Possible duplicate of [Changing the width of Bootstrap popover](http://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover) — c0d3rman, Aug 11 '16 at 23:08

score 4 · Answer 1 · edited Aug 11 '16 at 23:07

4

Try this:

.popover-inner {
   width: 500px !important;
   max-width:500px !important;
}
.popover {
   width: 500px !important;
   max-width:500px !important;
}

This takes advantage of the !important exception to apply the style.

When an important rule is used on a style declaration, this declaration overrides any other declarations.

edited Aug 11 '16 at 23:07

Hanlet Escaño

17,114
8
52
75

answered Aug 11 '16 at 23:06

Altin

2,175
3
25
47

2

Every time you use an !important in css code. God kills a cat. :( Please don't use !important if it's not necessary. – joseglego Aug 11 '16 at 23:20
@JoséLezama Nothing wrong with using !important in a case where you don't own the style sheet IMO. If it was his own stylesheet, then no need for !important. – Hanlet Escaño Aug 12 '16 at 02:15
1

In fact, `!important` has its own time as you say. It's true! And as you say normally came with the need of overwrite an third-party css. But in this case it was not necessary! As you can look with the code before suggested by me, or in the other response suggested in the comments of the question. So, If you can do without `!important` it was an unnecessary use of `important` So, a cat had die. :( If you want you can read: https://css-tricks.com/when-using-important-is-the-right-choice/ @HanletEscaño – joseglego Aug 12 '16 at 06:37

score 4 · Accepted Answer · answered Aug 11 '16 at 23:27

About your code and your problem, the problem is you are trying to edit an element whithout the correct selector (.popover). And when you try to edit the correct selector it has an max-width property. So it doesn't work. But is enough with

   .popover {
     max-width: 500px;
   }

That is all.

But I try your plnkr and find you are using modals classes in the code. That is a mistake. Because it's not the grammar or use of the css. So I add new css classes:

.popover-content > .header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5; 
}
 .popover-content > .body {
  padding: 20px;
}

And change the popover.html to:

<div class="header">
   <b>How is this amount calculated?</b>
</div>
<div class="body">
  <h4>PQ * A% * CR AVG </h4>
  <br />
  PQ - Pre-Qualified based on your historical data <br />
  A% - Approval percentage <br />
  CR AVG - (Historical Credits Earned) / (Total Certificates)
</div>
http://angular-ui.github.io/bootstrap/

You can check my plnkr fork:https://plnkr.co/edit/p4dr2XMzQqw8R6RYOsMo?p=preview

Increase the width of the popover

2 Answers2