Center Image in Title Bar using Teleport

Dashboard
1

Following the Blog example, "Customise theming in your FF Dashboard", I am able to place a logo in the title-bar but cannot figure out how to center it and have it remain centered after page resizing.

The only way I have been able to get it to move from its left justification is to set, margin-left: 300%; or other % value. margin: auto; doesn't move it. style="justify-content: center;" doesn't do anything either. Here is my latest attempt that doesn't work:

<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <div class="image-container">
            <img height="32px" src="https://app.flowfuse.com/ff-logo--wordmark-caps--dark.png" alt="FlowFuse Logo">
        </div>
    </Teleport>
</template>

<script>
    export default {
  data() {
    return {
      mounted: false
    }
  },
  mounted() {
    this.mounted = true
  }
}
</script>

<style scoped>
    .image-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
</style>

The template node is set to UI-Scoped. Any help would be greatly appreciated.

2

You'll need to add some custom CSS to the <style> tag at the bottom:

#app-bar-title {
    flex-grow: 1;
    justify-content: center;
}

The parent of the app-bar is "Flex" styled, and the above CSS will center it's content.

3

Ok, thanks Joe.