Help with dashboard design

So i’m working on building a custom dashboard / HTML.

I’m having problems with getting the dashboard html to display in a iframe on my html.

Currently this is what I have and it loads. I see the top nav bar flash then it disappears and the background is grey.

<iframe style="border: none !important; height: 100%;width: 100%; "src="***************" scrolling="no"></iframe>

Any help would be very helpful. FYI I am flying by the seat of my pants and have very LITTLE html knowledge so i’m learning as I go.

@just_jake, I am not sure if I understand your question. Does the dashboard eventually load? or can you post a screenshot so we can better understand what the issue is?

I put together a simple CodeSandbox showing an iframe in action using your code snippet. Seems to work fine (other than pointing to a non-existent dashboard in the example. :stuck_out_tongue:)

Edit objective-morse-yxn4n

Thanks Josh,

So here’s the new problem. I downloaded your supplied code and it doesn’t work in my chrome browser.
I load it in firefox and it works fine. So I tested the code that I was trying to use and it works fine in Firefox as well. I tried in Chrome a Shift-F5 and it reloads both pages. I get a momentary load of the blue Menu on the Sharptools Dashboard then it disapears. I supplied a screen cap of the results.

Any suggestions?

Does the code work fine on Chrome for you when run directly from CodeSandbox?

You might also double check what browser plugins / extensions you have installed in Chrome. You could try temporarily disabling them for testing to see if one of the extensions is contributing to the issue.

I would also try opening Chrome’s Developer Tools (F12) and then reload the page to see what error messages you see in the Developer Tools console.


So here’s a couple things.

  1. Your suggestion about using the console worked. The browser for some reason was blocking cookies to the site and preventing it from loading. (All things on that end are fixed)

  2. FireFox is not loading the 3 dot menu on the stock sharptools dashboard. The hover over effect shows but nothing happens when I click it.

3.FireFox again on my browser fails to load the this thread of the community.

Glad to hear that helped.

I would hazard a guess that something funky is going on with your Firefox browser as well. The dashboard editing interface and the community are both known to work fine with Firefox.

You could try a forced refresh (Ctrl+F5) or check the developer console to see if there’s any warning/error messages.

Is there anything else unique about this particular computer? I noticed it appears to be an older version of Windows. And with the oddity with the cookies, I wonder if something else that’s unique about the machine or its setup could be contributing to the issues you are seeing. :thinking:

Everything seems to be working now. Thanks for the help here’s what I have come up with.

Home, Lighting, Weather, Security, Home Dashboard (not in kiosk mode)

Here’s a link to the animated menu I used.
(Animated Radial Menu with jQuery and CSS3 Transitions | Free jQuery Plugins)

Granted all of this needs to be resized to the size of the tablet and phone screen, but I now have a good place to start.


That looks awesome! Thanks for sharing the screenshots!

Be sure to share it in the Show Off Your SharpTools Dashboards! thread too!