Horizontal line is not positioned correctly

rhyous commented 8 years ago

I have a simple footer. Some text with some links. If I have help pointing at these links, however the horizontal white line is failing.

It is also failing if placed on an div that wraps an image.

See the issue: chardin-bug js

Here is my simple html.

Note: I tried to apply https://github.com/heelhook/chardin.js/pull/65 (which I guess is the same as https://github.com/heelhook/chardin.js/pull/68 too). It helped the vertical position but not the horizontal position.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="chardinjs.css" />
    <script>
    $(function() {
      $("body").chardinJs("toggle");
    });
  </script>
    <script src="./chardin.js"></script>
  </head>

  <body>
  <div>
    <div style="width: 99%; text-align: center;">
      <div style="display: inline-block" data-intro="The div around a 32x32 image" data-position="left"><img src="http://www.rhyous.com/wp-content/plugins/social-media-widget/images/default/32/facebook.png" /></div>
    </div>
  </div>
  <div id="footer" style="text-align: center">
    <div>
        <div><hr /></div>
        <div style="width: 800px; margin: 0 auto;">
            <p style="font-size: .8em;">For license issues, contact <a href="mailto:operations@landesk.com" data-intro="The tells you who to contact for license issues." data-position="left">Licensing</a>.
            For support issues contact <a href="http://www.landesk.com/support/contact" data-intro="The tells you who to contact for support issues." data-position="bottom">Support</a>.
            Send website feedback to <a href="mailto:LicensingPortal@landesk.com" data-intro="This tells you where to email website " data-position="right">feedback</a>.
        </div>
        <div>
            <hr />
        </div>
    </div>
  </div>
  </body>
</html>

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/30122987-horizontal-line-is-not-positioned-correctly?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283283&utm_medium=issues&utm_source=github).

rhyous commented 8 years ago

FYI, this is also happening in critical areas other than my footer. The 'critical areas' examples were more difficult to add to the single page example as it is all knockout driven and has tons of css layout.

rhyous commented 8 years ago

interesting. In all three instances the style 'left' or 'right' needs to be -176px.

We have elements of sizes 32x32, 51x14, 46x14. Why do they all needs to -176. I thought maybe that was a minimum value, but it wasn't.

rhyous commented 8 years ago

For the facebook image:

.chardinjs-tooltip top: -2px; <-- Should be 6px. left: -133px; <-- Should be -176px

Somewhere, we should add 8 to the top. But not always. So when? Somewhere, we should subtract 43 from the left. But not always. So when? And it isn't always 43. So how is 43 calculated?

For the first link in the footer

For the facebook image:

.chardinjs-tooltip top: -11px; <-- Correct this time left: -153px; <-- Should be -176px

Somewhere, we should subtract 22 from the left. But not always. So when? And it isn't always 22. So how is 26 calculated?

If the width is 75 or greater, it doesn't have an issue. My image is 32. I need to subtract 43 more. 32 and 43 is 75.

For the link, 75 holds true as well.

However, if the text isn't max 200 (say it is only 195) then the 75 goes down to 70. I'm starting to find a pattern here.

rhyous commented 8 years ago

I have branched the code. I changed the javascript and everything appears to be working now.

I guess I have to change the coffee file, though.

pablof7z / chardin.js

Horizontal line is not positioned correctly #87