100% map height?

Home › Forums › MapPress Support › 100% map height?

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 12, 2013 at 10:29 am #13754
    westfallworks
    Participant

      I want a map to fill 100% of the page height. When I put height="100%" the map doesn’t show at all. 100% width works fine. Is there a way to make 100% height work as well?

      November 12, 2013 at 3:31 pm #13757
      Chris
      Keymaster

        Hi,

        The map actually is filling 100% of its parent element, but unless the parent has a fixed height the browser will report 100% height as zero (i.e. unknown).

        Most blog themes don’t use a fixed height because the page is meant to scroll, so height=100% by itself won’t work.

        To make a full-screen map you need to first create a full-screen theme template file.

        As an example here are the steps for the standard 2013 theme:

        1. Create a custom post type to hold your map.

        2. Create a post using the new custom post type and put your map shortcode in it, for example: [mappress height="100%" width="100%"]

        3. Create a new theme template file called “single-type.php” where ‘type’ is the post type you created in step 1. This will apply a special theme template file to just that post type (alternatively, there are some plugins that let you assign a template file to individual posts instead of a custom post type).

        4. Edit the template file to make the content area full-screen. See below for a simple example in the 2013 theme. You can modify the example to add a header, sidebar, etc.

        5. In your styles.css, tell the map layout to fill 100% of the screen:

        .mapp-layout {
  height: 100%;
}

        6. If you want to display a poi list, use a shortcode with a partial height, for example height=”70%”, and adjust the styling of the poi list:

        .mapp-poi-list {
  max-height: 30%;
}

        Here is a simple theme template file for “single-type.php”:

        <!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<div id="page" class="hfeed site">
		<div id="main" class="site-main">
			<div id="primary" class="content-area">
				<div id="content" class="site-content" role="main">
					<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid red; overflow: hidden">
						<?php /* The loop */ ?>
						<?php while ( have_posts() ) : the_post(); ?>
							<?php the_content(); ?>
						<?php endwhile; ?>
					</div>
				</div><!-- #content -->
			</div><!-- #primary -->
		</div><!-- #main -->
	</div><!-- #page -->
	<?php wp_footer(); ?>
</body>
</html>
      • Author
        Posts
      Viewing 2 posts - 1 through 2 (of 2 total)
      • You must be logged in to reply to this topic.