Search code examples
csstwitter-bootstraphandsontable

Bootstrap Popover size increased upon applying it to Handsontable

I'm using the Bootstrap popover functionality for a certain feature in this web app we are making.

Each popover is triggered if ever an element/object has data-toggle=popover attribute.

As you could see in this picture: (See my FIRST comment below)

It all goes well, given that the popover defaults is set like this:

HTML

<!--Feel Rate Popover-->
<div id="feel-rate-popover" class="panel panel-primary">
  <div class="loading">Loading...
    <div class="panel-heading" id="feel-rate-heading">
        <div class="row">
            <div class="col-xs-3">
                <img class="feel-logo" src="images/happy_l.png">
                <div id="happy-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/sad_l.png">
                <div id="sad-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/angry_l.png">
                <div id="angry-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/surprised_l.png">
                <div id="surprised-count"></div>
            </div>
        </div>
    </div>

    <div class="panel-footer" id="feel-rate-footer">
      <a data-toggle="modal" data-target="#express-feeling-modal">
        <span class="pull-left">Express Feeling</span>
        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>
</div>

CSS

#feel-rate-popover,
#feel-rate-loading,
#warning-feeling {
  display: none;
}

.feel-logo {
  height: 85%;
  width: 85%;
}

.express-button {
  height: 75%;
  width: 75%;
}

.popover {
  width: 350px !important;
  max-width: 350px !important;
  height: 140px !important;
}

.col-xs-3 {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

#express-feel-row .col-lg-3 {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
}

#feel-rate-heading {
  padding: 5px 5px;
  margin-right: 5px;
  margin-left: 5px;
}

#feel-rate-footer {
  border-top: 1px solid #d7d7d7;
  background-color: #ffffff;
  padding: 5px 5px;
  height: 20px;
}

But how come if I apply it to a <td> of a Handsontable, the popover goes awry. (See my SECOND comment below for link)

As you would notice, the size of the popover increased by 4px in height and weight. (Note that the default is set by 350px x 140px while this one is 354px x 144px)?

So how come it goes like this? Is it overlapped by some CSS in thehandsontable.css? Or did it inherit any styles of its superclass/container?

Here is the code for the handsontable.css for reference: https://github.com/handsontable/handsontable/blob/master/dist/handsontable.full.css

FOR FIDDLE REFERENCES: http://jsfiddle.net/anobilisgorse/hU6Kz/3286/

Solution

  • It's very reasonable to assume there's overlapping CSS since these sort of styling issues come up often for now. Have you tried looking in the handsontable CSS file to see if you can find it? It shouldn't be hard if you know the exact margin and the div it's affecting.

    While you do that (and if you find it, please let us know!) a simple solution would be to override the style yourself and set is as "!important" to make sure HOT doesn't override it. This is actually a nice development as before, popovers didn't work well at all when trying to set it in a .

    One last thing, another place to look would be on tags related to the "comments" section of the program. They use popovers so my guess is the margin is added to those divs.