Home › Forums › MapPress Support › 100% map height?
Tagged: height, responsive
- This topic has 1 reply, 2 voices, and was last updated 9 years, 2 months ago by
Chris.
-
AuthorPosts
-
November 12, 2013 at 10:29 am #13754
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 #13757Hi,
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>
-
AuthorPosts
- You must be logged in to reply to this topic.