Dynamic navbar title rendering in center

Questions
1

Dear all,

In my app, different pages need a different navbar title. To accomplish this, I have stored the titles in a database, and on pageInit I pull the required title from a database and inject it to the empty navbar title element. However, the title is not aligned to the center, but somewhat to the left of the center.

(Note. Interestingly though, in iOS the alignment is corrected (shifted) when the user interacts with the page [i.e., fills out a text box], but not in a browser and Android where the title remains misaligned).

(Note. I also tried to render the title dynamically without having to pull it from the database, but that did not solve the issue.)

I think I have to inject the navbar title before rendering the page to solve this issue, but how to accomplish this using the capabilities of Framework7?

Thanks for your help!

============

My code:

In the js file =

 DiaryDatabase.transaction(function (tx) {
                var query = "SELECT " + moduleName + " FROM surveyStructure WHERE rowid = ?"
                tx.executeSql(query,[1],function (tx, resultSet) {
                    if (moduleName=="moduleAname"){
                    emptytitle.innerHTML += resultSet.rows.item(0).moduleAname}
                    if (moduleName=="moduleBname"){
                    emptytitle.innerHTML += resultSet.rows.item(0).moduleBname}
                    if (moduleName=="moduleCname"){
                    emptytitle.innerHTML += resultSet.rows.item(0).moduleCname}
                    if (moduleName=="moduleDname"){
                    emptytitle.innerHTML += resultSet.rows.item(0).moduleDname}
                })
            }),   
            function (tx, error) {
                app.dialog.alert("Error text.")
            }

In the html file:

<div class="pages">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="module" class="page surveytheme">
        <!-- Top Navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left" >
                    <a href="/survey/" class="link">Terug</a>       
                </div>
                <div class="title" id="emptytitle"></div>
            </div>
        </div>
        <!-- Scrollable page content -->
        <div class="page-content">
            <div class="tab-content">
                <div class="tabs" id="emptypage"></div>
            </div>    
        </div>
    </div>
</div>
2

Solved:

I called the function on pageBeforeIn, instead of on pageInit.

1 Like
3

In the latest version of framework7, I still have this problem,
Below is my vue code:

<template>
  <f7-page name="details-enterprise" @page:beforein="onPageBeforeIn">
    <!-- Top Navbar -->
    <f7-navbar  back-link="返回">
      <f7-nav-title :title="title" > </f7-nav-title>
    </f7-navbar>


  </f7-page>
</template>

<script setup>
import {onMounted, ref} from "vue";

const title = ref(undefined)
const props = defineProps({
  f7router: Object
})
const loadEnterpriseInfo = () => {
  return {

    basic: {
      cover: {
        type: 'text',
        value: 'https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg'
      },
      name: {
        type: 'text',
        value: "农夫山泉四川饮品有限公司"
      }
    }
  }

}


const  onPageBeforeIn=()=>{
  const info = loadEnterpriseInfo()
  title.value = info.basic.name.value
}

</script>

<style scoped>

</style>

As you can see, I set the title dynamically in the beforeinit event, but it still shows on the left side of the navbar instead of being centered
https://raw.githubusercontent.com/cruldra/raws/main/uPic/XWw9bS.png

4

I have solved this problem, in framework7-vue, need to use beforemount event

import { onBeforeMount} from "vue";

onBeforeMount(()=>{
   const info = loadEnterpriseInfo()
  title.value = info.basic.name.value
})