Maps are not rendered completely with 100% width using The7 Theme

  • Resolved mlubkoll

    (@mlubkoll)


    5 years, 8 months ago

    Hey everyone,

    I’ve been using Mapbox for quite some time in order to build my platform but I’ve encountered an issue that I am, for some reasons, not able to resolve manually.

    I am using the The7 theme and have created maps with the Plugin. When I embed the map with the shortcode, I use the attributes width: 100% within the shortcode as described in the documentation: [wp_mapbox_gl_js map_id=”16367″ width=”100%” height=”550px”]

    However, the map only renders 50% of it and after resizing my window manually the map is then being stretched to 100%.

    These are real unfortunate circumstances. The same issue applies if I embed the code that is being provided in the Mapbox Studio.

    I read that other people have issued a different function in the jQuery script to resolve this issue. But I don’t see how to do it in the case of using this plugin?

    Really look forward to getting a productive solutions!

    Thanks,
    Mark

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author tempranova

    (@tempranova)

    Hi Mark!

    Thanks for the question/bug. We suspect this is an issue related to the way that The7 theme may render content. On many of the more integrated, complicated themes, they render content in different ways than in normal WP installs. This causes certain divs to have one width, only to be reset to another width with Javascript after the page loads. As a result, when the map initializes, there are occasions when the containing div will resize a fraction of a second later, but the map doesn’t know to resize itself to match the changed container.

    We have fixed this in a one-off on some maps in the past by adding a timeout before the load, but it’s a very hacky solution. I would recommend giving a test if it’s possible without The7. We will revisit this in the future (we are taking a break from active development on this for a few weeks) and see if we can add an additional option for these cases.

    Hi

    I have exactly the same issue with the plugin when using it with WP Bakery Page Builder (aka Visual Composer).

    It renders to its approx. 50% of page’s width, even though both the shortcode and its container are set to 100% of the width.

    When I start to scale the browser window, suddenly the map gets 100% of the width as it’s supposed to be.

    I have no idea how to fix that.

    Can you help to find a solution to this?

    • This reply was modified 5 years, 5 months ago by kryvulena.
    • This reply was modified 5 years, 5 months ago by kryvulena.
    Plugin Author tempranova

    (@tempranova)

    Hi, we don’t support Visual Composer, and it renders the pages in such a way that cause the map to be rendered at incorrect widths. It would need a timeout to be set before loading the javascript, because Visual Composer loads in a dumb way:)

    Ok I understand. How do I set the timeout then?

    Plugin Author tempranova

    (@tempranova)

    You will need to go into the public javascript file, and wrap the loading of the map in a setTimeout call.

    Unfortunately – I’m not familiar with js, is there any public example of such mod available which I could use?

    Plugin Author tempranova

    (@tempranova)

    Unfortunately not. It’s a bit tricky to do

    Could you look into this particular case? I actually don’t know what to do now ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Maps are not rendered completely with 100% width using The7 Theme’ is closed to new replies.