I'm trying to figure out the best way to set the height of a div that I'm using for Google Maps. Ideally, the map would take up basically all of the window below a certain point. However, I can't just set the height to a percent because that bases the percent off the parent's height - and in this case, the parent div is created by a jQuery UI tab. The problem is that jQuery UI Tabs size themselves to fit their content. So if I set my div to any relative value, it's based on the parent, which starts out with size zero.

So, is there a way to set my div's height to a percent of something other than its immediate parent?

A related question: ideally my div's height would actually be 100% of the window height, minus a fixed amount. I know there's a bunch on Google about "subtracting" a fixed amount (say, pixels or em) from a percent value, but I can't get it to work. How would I combine this with my first question?

My ultimate goal is to set the height of my div to 100% of the browser window height, less a certain amount - how do I do this? Thanks!

1 answer

1
point

You should probably do it with jquery after the fact. Maybe on tab activation? The documentation says this.

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

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

For Google maps you can also resize the map once the tab is displayed like this:

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

resizeMap() will call Google Maps' checkResize() on the particular map.

Give it a try. If neither of those work, try writing a function to resize the div of the map called the same way as above. Try this before initializing the map. Referencing the v3 Google map api) assuming you made an initialize() function like in the example.

var mapheight = $(window).height() - 300; //enter hight of header and footers here
$('#example').bind('tabsshow', function(event, ui){
    if(ui.panel.id == "map-tab'){ //id of map panel containing the #map_canvas div
       $("#map_canvas").height(mapheight);
       initialize();
    }
 });
Answered about 7 years ago by Francis Gulotta
  • Sorry, but that really doesn't answer it. I've stared at that jQuery documentation for long enough I practically have it memorized. For starters, I'm using Maps API v3 which means that none of jQuery's tricks (which you posted) work. I have the map rendering just fine - it's just a matter of getting the height of the map div to be exactly what I want it to be, namely, 100% of the window height, minus a fixed amount for my header and row of tabs. Matt Ball about 7 years ago
  • I wrote my own function to set the hight and then call the map. Francis Gulotta about 7 years ago
  • did it work? Francis Gulotta about 7 years ago
  • I got it. I trigger a resize event every time the map tab is clicked (only after the map's been initialized) and I wrote a function to set the canvas size based on the current window size which gets called before the map is initialized, and every time the window is resized. It's pretty awesome. Matt Ball about 7 years ago