Dynamic navbar title rendering in center

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 class="title" id="emptytitle"></div>
        <!-- Scrollable page content -->
        <div class="page-content">
            <div class="tab-content">
                <div class="tabs" id="emptypage"></div>


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

1 Like