nantoniadis / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
Apache License 2.0
0 stars 0 forks source link

Multiple tab rows for infoBubble #112

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
I would like to see an option to split the tabs into multiple rows, this is 
especially useful when there are a greater number of tabs or a limited view 
port for the map.

Perhaps a setting for tabsPerRow

I have an application where on occasion I have 24 tabs.  It creates a 
infobubble that extends off the side of the map, and when panning over to view 
the tabs the info bubble disappears when the anchor moves off the map.

Original issue reported on code.google.com by da...@meshnet.ca on 16 Aug 2011 at 12:51

GoogleCodeExporter commented 9 years ago
Added The following line to the buildDom function as a test and it worked 
pretty good by constraining the tabs to the maxWidth option.

 tabsContainer.style['maxWidth'] = this.get('maxWidth');

CODE:

/**
 * Builds the InfoBubble dom
 * @private
 */
InfoBubble.prototype.buildDom_ = function() {
  var bubble = this.bubble_ = document.createElement('DIV');
  bubble.style['position'] = 'absolute';
  bubble.style['zIndex'] = this.baseZIndex_;

  var tabsContainer = this.tabsContainer_ = document.createElement('DIV');
  tabsContainer.style['position'] = 'relative';
  tabsContainer.style['maxWidth'] = this.get('maxWidth');  /** constrain tabs to maxWidth**/

  // Close button
  var close = this.close_ = document.createElement('IMG');

...

Original comment by da...@meshnet.ca on 16 Aug 2011 at 2:53

GoogleCodeExporter commented 9 years ago
Need to fix the maxWidth for the content area as it is still stretched out to 
the width of the tabs being in one row.

Then position the close button better as it is floating above the info content 
area when there is more than 1 row of tabs.

Original comment by da...@meshnet.ca on 16 Aug 2011 at 2:57

Attachments: