JustGage not drawing when used within Twitter Bootstrap Tabs or Carousel controls upon window resize

[js1972]

Hi, I've noticed that when you resize the window a justGage control will not draw the graphics if its inside a bootstrap 3 tab or carousel (that has been tabbed or clicked). You can toggle the display:block or inline-block for it to appear again.

As a workaround I user a timer to find the end of the resizing and quickly switch tabs - then the Gage's are redrawn properly.

[toorshia]

Hi,

Can you provide test case/demonstration of this issue?

Thanks for spotting :)

[js1972]

Hi. Here's a link to a jsbin I've doctored up to show you the issue: http://jsbin.com/UxUkUpA/1/edit?output . See this image for what it looks like when it stuffs up: https://dl.dropboxusercontent.com/u/7546923/justgage/Capture.PNG

Now to duplicate this. You need to go crazy with some resizing and after you have flicked back and forth between the tabs. You'll see there is 3 gauges in each tab. Note the issue DOES NOT appear if you have not at least clicked on the tabs. Exactly the same issue when using a carousel instead of tabs. If you look at the html you'll see the scripts are all just up on dropbox but at least you can download them and play with them.

The only way I've managed to get around this is to detect the end of a resize and then with code I switch tabs; set a small timer, then switch back. The user can't even tell...

I can only imagine its something to do with the canvas (which I don't know much about - never coded with it).

Hope this helps.

Regards... Jason.

[guiskj]

I am having the same problem with justGages inside jQuery tabs, except that the quick tab switch does not work without user perception.

[js1972]

Really... Can you show me how you've coded the tab switch... Its completely indistinguishable for me... Just a matter of ratcheting down the milliseconds on the timer.

On 12 November 2013 05:11, guiskj notifications@github.com wrote:

I am having the same problem with justGages inside jQuery tabs, except that the quick tab switch does not work without user perception.

— Reply to this email directly or view it on GitHubhttps://github.com/toorshia/justgage/issues/93#issuecomment-28239119 .

[toorshia]

OK, this one's funny :) Here goes:

When I open the page, and start resizing browser, at some point only gauges disappear (labels remain). Switching to 2nd tab, and then back to 1st - brings back the gauges. Resize browser again on 1st tab, they are gone again. However, resizing browser while on 2nd tab doesn't do anything to gauges, everything is as should be.

Can somebody confirm this behavior? I really have no freakin' idea what might be the culprit of this...

[guiskj]

Sure, every time I use the refresh function for a gauge in the second tab, I experience the problem you have in the first tab, but when I switch to second tab and back, they display correctly. This is the code that I have tried to use every time I refresh a gauge: $("#tabs").tabs("option", "active", $("#tabs-2Selector").index());setTimeout(function () { $("#tabs").tabs("option", "active", $("#tabs-1Selector").index()); }, 50); $("#tabs").tabs("option", "active", $("#tabs-1Selector").index());

Thanks Date: Mon, 11 Nov 2013 16:28:03 -0800 From: notifications@github.com To: justgage@noreply.github.com CC: guiskj@hotmail.com Subject: Re: [justgage] JustGage not drawing when used within Twitter Bootstrap Tabs or Carousel controls upon window resize (#93)

Really... Can you show me how you've coded the tab switch...

Its completely indistinguishable for me... Just a matter of ratcheting down

the milliseconds on the timer.

On 12 November 2013 05:11, guiskj notifications@github.com wrote:

I am having the same problem with justGages inside jQuery tabs, except

that the quick tab switch does not work without user perception.

—

Reply to this email directly or view it on GitHubhttps://github.com/toorshia/justgage/issues/93#issuecomment-28239119

.

— Reply to this email directly or view it on GitHub.

[guiskj]

So, I removed the jQuery tabs and the error persists even when I have two sets of gauges in two different divs and just hide/un-hide them...

[toorshia]

I think I know what's the culprit of this issue - it's most probably the dy parameter, but I'l have to try & test it...will be back with some updates soon.

[wburgers]

Has there been any progress on this? I'm using JQuery UI tabs and if I set the default tab that opens to the gauges tab, it all works well. But if the tab with the gauges is hidden (display:none), the gauges won't draw properly.

I hope this can be fixed. For now, I'll just set it as the default tab.

[simonl65]

Darn it - I've just hit this problem too. Has there been any progress?

[dtelaroli]

+1

[acekyle23]

+1

[LGro]

+1

[agustinjlopez]

+1

[ghost]

Some times ago I had similar problem - but generally not only justGage not drawing when parent container has display: none - I suppose it's because of browsers, probably they not creating all container properties if 'display' is set to 'none'.

Solution in my case -> put justGage into div and set style for this div (width/Height and display: block). So container for justGage will be properly set up by browser even it higher container is not displayed.

[toorshia]

Guys, have you tried setting width/height to gauge container? Is this working?

[beckyt-dev]

I'm still experiencing this issue even with the width/height in the gauge container.

[nronnei]

I've had similar issues using Material Design Lite grid. In my case, the problem was that if I wanted the gauge to be responsive, I couldn't set it's height/width using CSS. But if I didn't set it with CSS, Raphael broke. I got around it by setting the width/height in Javascript instead.

HTML

<div class="mdl-cell mdl-cell--12-col" id="station-gauge-container">
  <div id="station-gauge"></div>
</div>

CSS

#station-gauge-container {
    /* center the guage */
    margin-left: auto;
    margin-right: auto;
    /* responsive width */
    width: 100%;
    display: block;
    position: relative;
  }

  #station-gauge {
    display: inline;
  }

JS

const bikeGauge = new JustGage({
      id: "station-gauge",
      value: 2,
      min: 0,
      max: 25,
      relativeGaugeSize: true,
      width: 240,
      height: 160,
      title: "",
      label: "Bikes",
      levelColors: [
        "#2807ff",
        "#ff0000"
      ]
    });