Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Buttons are not styled when page loads

See original GitHub issue

Hi there, super cool project.

I’m trying to use your buttons on my deployed documentation site: Unfortunately, I can’t get them to load properly.

I am using them in a div to center them, like so:

<div align="center">
  <a class="github-button ghbns" href="" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch wcarhart/koi on GitHub">Watch</a>
  <a class="github-button ghbns" href="" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star wcarhart/koi on GitHub">Star</a>
  <a class="github-button ghbns" href="" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork wcarhart/koi on GitHub">Fork</a>
  <a class="github-button ghbns" href="" data-size="large" data-show-count="true" aria-label="Follow @wcarhart on GitHub">Follow @wcarhart</a>

Where the only additional styling I’ve applied is:

.ghbns {
	padding-left: 1rem;
	padding-right: 1rem;

I see in my browser that is loading, but I don’t see the buttons being styled properly. Network graph: image

Web page: image

I have tested in Chrome, Safari, and Brave, with localhost and on the live deployed site. I have also tried without the additional CSS styling, and loading the script without async and defer. Have you ever had this occur before? If so, do you have any hints?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

ntkmecommented, May 1, 2020

I don’t have time to test it, but something like this should work (make sure you use rollup or webpack to take care of the import and generate a bundled script).

import { render } from 'github-buttons'

function handleGitHubButtons() {
  const container = Docsify.dom.getNode('#main')
  const buttons = Docsify.dom.findAll(container, 'a.github-button')

  for (let i = buttons.length; i--; ) {
    const button = buttons[i];
    render(button, function (el) {
      button.parentNode.replaceChild(el, button)

const install = function(hook) {

window.$docsify.plugins = [].concat(install, window.$docsify.plugins)
ntkmecommented, May 1, 2020

I never used or tested this on docsify. However, by reading the documentation I think you can probably use external script plugin. With this plugin, you would need to add buttons.js script to .md file that contains the button rather than the index.html. That may just work.

Now, the proper way to do it is to write a docsify plugin that import this library and run its render function on Docsify.dom.findAll('a.github-button'), it should be very similar to external script plugin (source code) in general structure.

Read more comments on GitHub >

github_iconTop Results From Across the Web

After page load, button only works when it is clicked the ...
Only one Div can be displayed at a time. I have this part working but I've run into an issue where, after the...
Read more >
Lesson 1: Using JavaScript to Show an Alert
So far in this lesson, we have called the showAlert() function when the body of the web page is loaded. However, we could...
Read more >
Adding a Load More Button to your Content - Solodev
This article will show you how to display more content while providing an improved user experience by utilizing a \"\"Load More\"\" button...
Read more >
How to get focused a button automatically when the page load ...
The <button> autofocus attribute is used to get focused button automatically after loading the web pages. Syntax: <button type="" autofocus> ...
Read more >
A Complete Guide to Links and Buttons - CSS-Tricks
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found