Title: 100% width in tabs
Last modified: September 1, 2016

---

# 100% width in tabs

 *  Resolved [azlivin008](https://wordpress.org/support/users/azlivin008/)
 * (@azlivin008)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/100-width-in-tabs/)
 * Thank you for your wonderful plugin! I desperately needed a map plugin that would
   work inside a JQ tab, and I think yours is just about the only one out there 
   that does. I found one small glitch: the map works fine (in tab) as long as I
   specify an exact pixel number for the width (width=740″), but it will not render
   correctly if I try to use width=”100%”.
 * I tried the fixes you suggested (both the cloudfare fix and the footer script
   you suggested) and got the same results.
 * I can work with it because I set the width to match the content container, but
   if I ever change themes or container size, it would be much easier if width was
   just at 100% and save me from having to go through all pages to resize the maps.
 * [https://wordpress.org/plugins/wp-flexible-map/](https://wordpress.org/plugins/wp-flexible-map/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [webaware](https://wordpress.org/support/users/webaware/)
 * (@webaware)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/100-width-in-tabs/#post-7586611)
 * G’day azlivin008,
 * 100%… of what? 🙂
 * When using relative dimensions, you need to ensure that the container has some
   dimensions itself. Check through your containing elements to find where this 
   is breaking down, and add width 100% to that element.
 * cheers,
    Ross
 *  Thread Starter [azlivin008](https://wordpress.org/support/users/azlivin008/)
 * (@azlivin008)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/100-width-in-tabs/#post-7586800)
 * My container element is defined in functions, but the map was not picking it 
   up on desktop (mobiles seemed to pick up the width, but displayed the map slightly
   off-center).
 * In case anybody else is still having issues with maps inside of tabs, I found
   a somewhat simple solution by creating a .map-canvas class in css with widths
   defined in vw & vh dimensions instead of px or %. I wrapped flexible map that
   was hidden inside the tab in the class=”map-canvas”, then made the map width=”
   100% and height=”100%” in the shortcode of the map.
 * For anybody else looking for a somewhat easy solution without having to deal 
   with js, changes to functions.php or extra plugins, here is what I did:
 * in your css file add:
 *     ```
       /* to handle large desktop with content & sidebar */
       .map-canvas {width: 55vw; height: 50vh; margin 0 auto; }
   
       /* to handle devices with one-column or landscape mobiles add */
       @media only screen and (max-width: 700px) {
       .map-canvas {width:85vw; height: 90vh; }
       }
       /* to handle portrait view of smaller devices add */
       @media only screen and (max-width: 480px) {
       .map-canvas {width:90vw; height: 75vh; }
       }
       ```
   
 * Then, wrap your map shortcode inside the div class:
 *     ```
       <div class="map-canvas">[flexiblemap shortcode here width="100% height="100%]</div>
       ```
   
 * Play with vw & vh dimensions as needed for your site and preferences. It’s not
   perfect, but it’s easier than anything else I’ve found & I was able to test it
   on large monitor 1920×1080 desktop, Samsung Note3 mobile and kindle fire HD tablet.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘100% width in tabs’ is closed to new replies.

 * ![](https://ps.w.org/wp-flexible-map/assets/icon-256x256.png?rev=2590627)
 * [Flexible Map](https://wordpress.org/plugins/wp-flexible-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-flexible-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-flexible-map/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-flexible-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-flexible-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-flexible-map/reviews/)

## Tags

 * [100% width](https://wordpress.org/support/topic-tag/100-width/)

 * 2 replies
 * 2 participants
 * Last reply from: [azlivin008](https://wordpress.org/support/users/azlivin008/)
 * Last activity: [9 years, 10 months ago](https://wordpress.org/support/topic/100-width-in-tabs/#post-7586800)
 * Status: resolved