Having a problem to display Gmap properly.

Having read some documentation:
http://docs.jquery.com/UI/Tabs#...my_slider.2C_Google_Map.2C_sIFR_etc._n...

There are two solutions:
1 based on CSS
This does not work, with this Conditional fields.(Or am i missing something?)
As this module does not use a stylesheet nor does it have a different css class when the gmap is hidden
it uses inline css with js to change display: none -> display: block

2 The other one is based on javascript.

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

How can i implement this code so that my Gmap will display properly?

Thanks

Comments

held69’s picture

The javascript mentioned under 2 should be:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

How can i implement this code so that my Gmap will display properly?

Thanks

pasqualle’s picture

subscribe

mrbangkok25’s picture

@held69

Change you conditional_field.js on line 13 and 31 from

 Drupal.ConditionalFields.doAnimation(controlledField, 'hide', onPageReady);    
      }

To

Drupal.ConditionalFields.doAnimation(controlledField, 'hide', onPageReady);
      $('#conditional-field-your-field-name') . addClass('whatever-hide');
    }

and on line 37 from

Drupal.ConditionalFields.doAnimation(controlledField, 'show', onPageReady);
       }

To

Drupal.ConditionalFields.doAnimation(controlledField, 'show', onPageReady);
        $('#conditional-field-your-field-name') . removeClass('whatever-hide');
      }

To add and remove class based on 'show' or 'hide'

And the last part is add to your stylesheet

.whatever-hide {
  position: absolute;
  left: -10000px;
  top: -10000px;
  display: block !important;
}

Hopes this helps you

held69’s picture

@mrbangkok that sounds great Thanks!

Ill trie and report back.

held69’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.