Marquee Title in the Nav-Bar

1

So I have a use case where the text that needs to go into the NavBar can be particularly long, but we want the user to be able to see all of the text. The way the app is structured is sort of master/detail, where there is a list of masters and when clicked, navigates to a page with details (it’s one page, with 4 tabs at the bottom). The title of the “detail” page can often be lengthy and we found that on very small screens makes it difficult to read. Has anyone explored with making text in a nav-bar marquee scroll? Some challenges here would be different screen sizes (phone vs. tablet), as well as browser support. Is there a better way that someone has found to display this type of information on a limited screen size? Interested in seeing what solutions others have experimented with…

2

I had this problem too and I override the Ionic’s css, ai also fix the problem of the header increase when you want an status bar pixed on IOS. Take a look:

ion-side-menu .title {
    max-width: 162px !important;
    margin: 0px !important;
    overflow: inherit !important;
}

.title {
    max-width: 162px !important;
    margin: auto !important;
    overflow: inherit !important;
}

.buttonBarTitle {
    position: absolute !important;
    z-index: 0 !important;
    overflow: inherit !important;
    margin: auto !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 44px !important;
}

.buttonBarTitle span {
    vertical-align: top !important;
    line-height: 32px !important;
}

.bar {
    height: 44px !important;
}
3

I have solved with marquee

For example, the h1 title tag can has a class marquee.

Hope it’s help you

1 Like