Topic: EXTRA style and link meta tags being injected at top of HEAD after page load

jbankster.web pro asked 5 years ago


Hello, A script or something in MDB pro 4.2.0, after page load, is dynamically injecting meta tag links above the needed mobile meta tag links that need to come first in the document head. Is it possible to simply have these loaded below the mobile first meta tags? Short Description: Using MDB 4.2.0 Pro, style and link meta tags are being dynamically injected into the top of the "Head" tag, above the meta "charset, viewport, and http-equiv tags for mobile. *** In the past, we have experienced hair-pulling issues (specifically) with Windows mobile devices not displaying various elements correctly if these tags don't come first in the head portion of the document. *** Steps to Reproduce: Local package: MDB Pro 4.2.0>templates>advanced>Landing Pages>app.html First open the the app.html page in a text editor and in the head section of the document, you will see...
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>
... now goto: http://mdbootstrap.com/live/_MDB/index/templates/pro/landingpage-app.html Inspect the head portion of the document and you will see the mobile first tags being pushed down by the dynamically inserted style and link meta tags:
<head>
	<style type="text/css">.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}</style>
	
	<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
	
	<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style>
	
	<style type="text/css">@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style>
	
	<style type="text/css">.gm-style{font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400;text-decoration:none}.gm-style img{max-width:none}</style>
	
	    <!-- Required meta tags always come first -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	    <meta http-equiv="x-ua-compatible" content="ie=edge">
	    <title>Material Design Bootstrap Template</title>
Thanks for your time, Josh

jbankster.web pro answered 5 years ago


Cool. Removing the associated Google Maps scripting resolved the issue. We'll just embed a responsive iframe for the google map for now. Thanks Bartlomiej, Josh

Hi, Josh! Thanks for noticing. It finds out that the Google Maps plugin injects their own CSS styles. We'll remove them in the new version of MDB

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags