1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Page Height, Mapbox and Footer

surface2air free asked 6 years ago

Hi MDB Support, I have a project that calls for a map, one I created using Mapbox GL JS (https://mapbox.com), and I have figured out a way to display the map which appears at page top below the MDB Navbar, but required a creative hack to get additional page content to display below it. Otherwise, the whole page is just the map. Having accomplished this, it appears the page looks fine until I open it in smaller viewports: the footer and some of the image and page content starts to overlap in the middle of the screen. Not the desired result. I have tried numerous CSS tricks to try and keep the page footer at bottom, but I am having a lot of issues with this page. Please have a look here: http://gridinteractive.com/gma-2018/georgetown-bites.htm And test on Quirktools: http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/gma-2018/default.htm&w=320&h=568&a=37&s=1 Any assistance with this page is appreciated! Thank you! Eric Seattle, Washington

Marta Wierzbicka staff answered 6 years ago

Hi, could you send me your HTML file to m.szymanska@mdbootstrap.com? I'll try to help you. Best, Marta

surface2air free commented 6 years ago

Hi Marta, Yes, I would really like to keep the standard page structure intact and display the Map div () as an element on the page. I am not fixed on the idea that it has to appear full-screen under the Navbar. I am open to the idea of the div container for the map to be flexible enough to coexist with other simple HTML elements above and below it: headlines, text, images, etc. I'm sending the link to the code via Codeshare.io to your email. Thanks! Eric Seattle, Washington

surface2air free commented 6 years ago

Hi Marta, You can close this support question, I have rebuilt my page with the Mapbox map and it seems to be working. I had to apply a z-index layer on the Navbar so that the Mapbox map pins can be selected and allow for the user to engage with the map. I also removed absolute positioning of the map and the use of setting fixed top and bottom values for the Mapbox map div container, which was part of how Mapbox tutorials demonstrate how to integrate the map's style for an HTML page. Having done this, I have a working web page with a Mapbox map now. Please close. Thank you!

Marta Wierzbicka staff commented 6 years ago

OK, I'll close.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
surface2air
47Support score
20Questions 12Answers 0Snippets