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

label position incorrect for yeoman generated angular app #34

Closed
typekpb opened this issue Nov 10, 2014 · 4 comments
Closed

label position incorrect for yeoman generated angular app #34

typekpb opened this issue Nov 10, 2014 · 4 comments

Comments

@typekpb
Copy link

typekpb commented Nov 10, 2014

not sure, where the problem is, just tested with yeoman generated angular app and I see following:

fork-me-on-gh

steps to reproduce:

  mkdir fork-me-on-gh
  cd fork-me-on-gh
  yo angular
  bower install --save github-fork-ribbon-css
  grunt serve

Afterwards, just replaced (in fork-me-on-gh/app/index.html):

  <body ng-app="forkMeOnGhApp">

with:

  <body ng-app="forkMeOnGhApp">
  <div class="github-fork-ribbon-wrapper left">
        <div class="github-fork-ribbon">
            <a href="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
        </div>
      </div>
@typekpb
Copy link
Author

typekpb commented Dec 9, 2014

not sure why, but copy-pasting (from the official css) the following style to my css:

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: 42px;
  left: -43px;
}

solved it for me.

Sounds like influenced by some other css that got in the way.

@brunowego
Copy link

+1 generator-webapp

Solution of @typekpb worked.

@hugovk
Copy link
Collaborator

hugovk commented Mar 24, 2015

Could this related to #37?

i.e. does the generated HTML end up something like this? (CDN or local, it's not important.)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />

If so, you'll end up loading the IE9 CSS for non-IE9 browsers. The second CSS needs to be in a conditional, something like:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
<!--[if lt IE 9]>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
<![endif]-->

@simonwhitaker
Copy link
Owner

Closing this one out on the rash, idle assumption that #37 probably fixes it. Please feel free to submit a pull request if that's not the case.

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
4 participants
@simonwhitaker @brunowego @typekpb @hugovk