Search Unity

WebGL - how to prevent overwritting of margin of <div>unityContainer in html during initialization?

Discussion in 'Web' started by ivank, Feb 1, 2019.

  1. ivank

    ivank

    Joined:
    Nov 16, 2013
    Posts:
    105
    Hello, I run into the following undoubtedly simple, but to me insolvable question:

    Let's have the Unity window in html page defined by the tag
    <div id="unityContainer" style="width: 100px; height: 100px; margin: 5 auto"></div>
    (this margin setting makes the game window nicely centered)

    How is it possible to prevent/influence the fact, that during initialization of Unity scene the margin (as well as padding and border) settings are overwritten to zero?

    It is most probably caused by the line 1035 in the default unminified UnityLoader.js:
    function instantiate(container, unityInstance) {...
    container.style.border = container.style.margin = container.style.padding = 0;
    ...}

    This behavior could be probably changed somehow directly from the html page by modifying the initialization javascript call
    "UnityLoader.instantiate('unityContainer', 'Build/myGame.json')"
    to something like
    "UnityLoader.instantiate('unityContainer', 'Build/myGame.json',{container.style.margin = 5 auto})",
    but - does anybody know the exact syntax?
    (WebGL section of the Unity Manual does not provide relevant info)

    Help of somebody experienced would be very appreciated :)
     
    ivank, Feb 1, 2019
    #1
    konsnos likes this.

  2. ivank

    ivank

    Joined:
    Nov 16, 2013
    Posts:
    105
    Actually - for those interested in this problem - I have already found at least some relevant info in one of the earlier posts here
     
    ivank, Feb 2, 2019
    #2

  3. JohnnyRouddro

    JohnnyRouddro

    Joined:
    Mar 12, 2018
    Posts:
    2
    Putting the unityContainer inside another container with same width and margin: auto seems to work for me.

    Code (JavaScript):
    1. <body>
    2.     <div style=" width: 960px; margin: auto">
    3.       <div id="unityContainer" style="position: relative; width: 960px; height: 600px"></div>
    4.     </div>
    5.   </body>
     
    JohnnyRouddro, Jun 1, 2020
    #3