Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › navigationBar.rightBarItem issue

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #11695


    I had some code using navigationBar.rightBarItem to add a button on the top-right. But it looks odd on iPhone, and I cannot adjust it.

    import Felgo 3.0
    import QtQuick 2.5
    import QtLocation 5.5
    import QtPositioning 5.5
    App {
        NavigationStack {
            anchors.fill: parent
            splitView: false
            navigationBar.rightBarItem: AppButton{
                anchors.centerIn: parent
                anchors.rightMargin: 10
                radius: 5
            ListPage {
                title: qsTr("Map Page")
                    active: true
                    onPositionChanged: {
                    id: map
                    anchors.fill: parent
                    plugin: Plugin{name:"osm"}
                    //center: QtPositioning.coordinate(59.930243,10.714635)
                    center: pos.position.coordinate
                    zoomLevel: 15
                    Component.onCompleted: {
                        console.log(pos.valid); pos.update();

    If you run it, you will see some right part of button go out of the screen on iPhone, while it is ok on Android.

    Screenshot here : http://screenshot.net/0expgu9


    Felgo Team

    Hi Nee!

    I looked into the matter – the current implementation of the NavigationBar moves the right item by 8 dp only for iOS.
    My guess is, that this just looked better for the default navigation-bar elements we use in our samples. But of course it makes problems for custom elements, we will fix this for the next update.

    Thanks for bringing this issue to our attention!

    In the meantime, you can add a quickfix yourself:

    navigationBar.rightBarItem: AppButton {
          radius: 5
          // only center vertically within the navigation-bar
          // horizontal centering doesn't make sense (there is no fixed "right-item-area" to center within)#
          // also, horizontal centering would interfere with the custom x-positioning below
          anchors.verticalCenter: parent.verticalCenter
          x: Theme.isIos ? -dp(8) : 0 // fix displacement on iOS


    One thing I want to mention is that we recommend to use the NavigationBarItem type as a base class for navigation bar elements. It currently only sets a default width and height, but in the future, we might extend it with further features.

    A solution that uses the NavigationBarItem could look like this:

    navigationBar.rightBarItem: NavigationBarItem {
          width: button.width + button.anchors.leftMargin + button.anchors.rightMargin // set width based on button (instead of default width of 48 dp)
          // height is automatically based on the height of the navigation bar (different on iOS and android)
          // fix displacement on iOS
          anchors.right: parent.right
          anchors.rightMargin: Theme.isIos ? dp(8) : 0
          AppButton {
            id: button
            radius: 5
            // you can also easily add margins this way
            anchors.fill: parent
            anchors.margins: dp(5)





    I really appreciate your reply, and it works for me. Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded