UI Issue - string are not displayed properly.

[Mathan M]

Hi,

I am designing the UI, The output what I am getting the words are missed, I increase the height/width of the controls as sufficient, but still I am getting the same.

[Wieland]

Hi! Please provide more info.

[Mathan M]

Hi Wieland,

Sorry for not providing enough information. Here's the scenario, I had designed Drawer with GridLayout which consists of Labels and an button. The purpose, It will display the details about the item and memory to be occupied. Once the user satisfied, user can see an Download button. Using the Qt Creator, I had designed the page:

Code Snippet:

Drawer{
    id: idDrawer
    //width: Math.min(window.width, window.height) / 3 * 2 - 100
   // height: window.height - 100
    width: 500
    height: 500
    x: 0


    property bool boolDownloadMap: false;

    GridLayout {

        anchors.fill: parent
        anchors.margins: 20
        rowSpacing: 20
        columnSpacing: 20
        flow:  width > height ? GridLayout.LeftToRight : GridLayout.TopToBottom
        Rectangle {
            id: idrectWrapper
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#5b76d6"
            Label {
                        id: idlblMapsStatus
                        y: 8
                        width: 223
                        height: 64
                        text: objHomeController.eveCalAvailSpace()
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        font.pointSize: 12
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }

                    Label {
                        id: idMapName
                        y: 121
                        width: 223
                        height: 44

                        anchors.left: parent.left
                        anchors.leftMargin: 8
                    }

                    Label {
                        id: idMapDesc
                        x: 8
                        y: 205
                        width: 223
                        height: 44

                    }

                    Label {
                        id: idlblSize
                        x: 8
                        y: 270
                        width: 91
                        height: 51
                        text: qsTr("Size Of Map")
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }

                    Label {
                        id: idlblSizeres
                        y: 270
                        width: 91
                        height: 51
                        anchors.left: idlblSize.right
                        anchors.leftMargin: 41
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        text: varSizeRes
                    }

                Button{
                id: btnDownload
                x:0
                y:400
                height: 25
                width: 100
                text: "Download"
                onClicked: {

                }
                }
        }

    }
}

Issue:

1. Some text are not shown
2. As you can see, Download button, text is not visible properly.

Thanks In advance

[Wieland]

Hi! I think there is some problem with the GridLayout. Can you verify that the following code works for you?

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "black"

    Drawer {
        id: drawer
        width: 0.33 * window.width
        height: window.height

        Rectangle {
            anchors.fill: parent
            color: "plum"

            GridLayout {
                columns: 1
                anchors.right: parent.right
                Label {
                    text: "Side Menu Content"
                }
                Button{
                    id: btnDownload
                    height: 25
                    width: 100
                    text: "Download"
                }
            }
        }
    }

    Rectangle {
        anchors.centerIn: parent
        width: window.width / 2
        height: window.height / 2
        color: "orange"
        Text {
            text: "Application Main Content"
            anchors.centerIn: parent
        }
    }
}