Remove fullscreen label

[leoVolk]

Hello there! Is there a way to remove the fullscreen label or edit its styling? The standard fullscreen label is clashing with my footer.

Still: thank you for this awesome component, you saved me a lot of time! Have a great day

[votetake]

Hi, have you tried using the attribute hideFooter? Example:

<template>
  <unity hideFooter=true src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ></unity>  
</template>

[masseydigital]

The above does not work for me... I'm still seeing the footer after adding hideFooter=true

[ellepin]

Hello, it works now. It sounds like you can pass some other parameters this way.

<template>
<unity v-bind="{hideFooter: true}" src="static/Build/game.json" unityLoader="static/Build/UnityLoader.js" ></unity>  
</template>

[MEAN-James]

The issue is the footer Unity.vue component doesn't match the index.html and static/TemplateData/style.css file that unity gives you. So if you include it the different footers will "clash". A kind of hacky solution for this is to select the element with the fullscreen class in the mounted lifecycle hook and set its text content to an empty string, Unfortunately, the label will still appear for a brief moment before being removed.

Alternatively you could opt to not include the static/TemplateData/style.css. Then nothing will clash but the fullscreen text will still be there and can be hidden using :hide-footer="true" attribute. this also allows you to remove a few files from your templateData folder like the webgl-logo.png, fullscreen.png and style.css for starters. I kind of like not having all that stuff in the footer personally.

On a side note, I tried to just edit the source template but it didn't seem to change anything for some reason. I tried rerunning the dev script and also deleting any service workers so I'm kind of confused there... I assume it has something to do with the JavaScript file that comes with the package.

<!-- the components footer html as is-->
<div class="footer" v-if="hideFooter !== true">
  <a class="fullscreen" @click.prevent="fullscreen">Fullscreen</a>
</div>

mounted() {
  document.querySelector('.fullscreen').textContent = ''
},

[wenwen1995]

Just in mounted function , use this code, set it to be hidden:

mounted() {
    // hide fullScreen
    const fullScreenEl = document.querySelector('.fullscreen');
    fullScreenEl.style.display = 'none';
}