Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Horizontal line is not positioned correctly #87

Open
rhyous opened this issue Jan 22, 2016 · 4 comments
Open

Horizontal line is not positioned correctly #87

rhyous opened this issue Jan 22, 2016 · 4 comments

Comments

@rhyous
Copy link
Contributor

rhyous commented Jan 22, 2016 •
edited by pablof7z
Loading

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:[email protected]" 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:[email protected]" 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
Copy link
Contributor Author

rhyous commented Jan 22, 2016

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 rhyous mentioned this issue Jan 22, 2016
Closed
@rhyous
Copy link
Contributor Author

rhyous commented Jan 22, 2016

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
Copy link
Contributor Author

rhyous commented Jan 22, 2016

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
Copy link
Contributor Author

rhyous commented Jan 27, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@rhyous