When navigating back from page that has a right nav, the previous page title is not centered

[jacobg]

Framework7 version: [e.g. 3.0.0] 7.1.5 Vue.js version: [e.g. 2.0.0] 3.2.47 Platform and Target: Emulating iOS on Chrome browser

Describe the bug

1. Navigate to a page that has a navbar with a left and title components.
2. Navigate to a page that has a navbar with left, title, and right components.
3. Go back to 1st page.

Expected results

1st page's navbar title should be centered like it was originally.

Actual results

The navbar title is on the right side instead of center. Inspecting the DOM show's that the title's div element is missing a left style position that was there originally, which apparently is used to center it. It seems that the title's position is not being updated when the right element is removed.

Here's a styling workaround that fixes the issue:

.navbar {
    .navbar-inner {
        div:last-child {
            &.title {
                // Workaround framework7 navbar styling bug.
                // https://github.com/framework7io/framework7/issues/4150
                left: calc((100vw - var(--f7-navbar-inner-padding-left) - var(--f7-navbar-inner-padding-right)) / -2) !important;
            }
        }
    }
}

[Simone4e]

Describe the bug Please post a codesandbox

[jacobg]

I tried to create a minimal reproducible example on a sandbox, but the issue is not reproducing. There seems to be something more subtle that is causing it to occur. I'll try to create an example soon.

[peitschie]

I had a similar experience @jacobg when using a JS framework with binding. What was happening was the title would not update until a moment after the element had been mounted in the dom by Framework7.

The title centering in Framework7 is done manually via JavaScript, and any change to the text length can make the title off-center. In my case, calling app.navbar.size manually a moment later was sufficient to fix the title again.