Help Needed: Dashboard UI

Need help Plugins
21

It is not because you are in development mode, as I am under same condition without an issue.

22

Thanks, SerPounce.

If anyone has ideas/suggestions for what might be wrong - would love any guidance! Again I have:

  1. Uploaded the 2 relevant files in settings -> seo/metatag section of bubble account
  2. Added header code to the page with HTML element
  3. Added HTML element with the code provided by graemejallen83

The result is a “General Error” in preview mode, with an invisible HTML element.

Thanks again!

23

If you share screenshots of the 3 steps we can help troubleshoot better, or a link to the app.

24

Hi SerPounce,

Thanks for your offer to help. I managed to get it to show up - turns out I did have to deploy live to get the files to save/work properly.

I am still having an issue though. Even though I’ve used the same code as was listed in this post, my label (1) is outside of the circle rather than centered. Do you have any ideas what may have caused this?

image

Thanks again!
J

25

Share screen shots of your code so we can help.

26

Sure! Below is the actual code in my HTML element.

<style type="text/css">
    .myBar{
        padding:0px;
    }
    .ldBar path.mainline {
        stroke-width: 6;
        stroke-linecap: round
    }
    .ldBar path.baseline {
        stroke-width: 1;
        stroke: #FFFCFC;
    }
    .ldBar-label {
        font-size: .5em;
        font-weight: 900;
        color: #F9F6F6;
        font-family: 'Ubuntu', sans-serif;
    }
</style>

<div style="width:100px;height:100px">
    <div class= "ldbar1 label-center" style="width:75px; height:75px; margin:5px 5px 5px 5px;" >
        <script>
            var bar = new ldBar(".ldbar1", {
                "precision":"1",
                "duration":"2",
                "transition-in":"true",
                "stroke": '#00A287',
                "preset": "circle",
                "value": 1
            });
        </script>
    </div>
</div>
27

Really think @Bubble should make this native!

28

Yes, the code looks right. Have you set up the page HTML header? How about sharing the app?

Also, when I was going through this I was able to get quite amazing help from the author on loading.io. You just need to create a disquss account if you don’t have one. He was extremely helpful.

29

Hi SerPounce,

Thanks for your help! I think the issue was a rootfile upload error. I reuploaded the CSS and we are now up and running!

Thanks again for your support.

All the best,
J

1 Like
30

Hi there, thanks for this valuable info!
Unfortunately this did not work for my app.
Although i did the steps as you listed, i cant seem to understand what went wrong.

this is exactly what did:

  1. downloaded the files and uploaded them to settings<seo&meta tags> hosting files in the toot directory
  2. added the code to header in seo&metatags…
    *I didn’t have any specific dimensions so i left it at 212 x 275

Total newbie here,
would love to know what i am missing.

thank you!

31

I am currently on the free plan, can this be the problem?

32

I have the same question about whether this is functional when using the free account.

I’m using the classify plugin to apply the styles to the Progress Bar element but being new, I’m still not certain that I’m doing enough and doing it right. Anyone that can provide a working example that we can review would be great.

Any updates?