Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

Problems with the size of the Popup content



  • Greetings. I am developing an application for android, in the Help and Contact section, I want to add a module to show the changes in the new versions. My current idea is to show the content in a Popup, but it happens that the text leaves the contours of the Popup, just as shown in the image:
    alt text
    This is the Popup code, can someone tell me how I can correct this?

    import QtQuick 2.0
    import QtQuick 2.6
    import QtQuick.Controls 1.4
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    import QtQuick.LocalStorage 2.0
    import QtQuick.Controls.Material 2.0
    import Qt.labs.settings 1.0
    
    Popup {
        id: mainPopup
    
        Material.theme: Material.Dark
    
        Keys.onBackPressed: close()
    
        FontLoader {
            id: fontLoader
            source: "qrc:/Fonts/MYFONT.TTF"
        }
    
        modal: true
    
        property var delegateComponentMap: {
            "Cambio": changeLabel
        }
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
    
        contentItem: ColumnLayout {
            id: mainColumn
            Label {
                Layout.fillWidth: true
                text: "Cambios en la aplicación"
                font.bold: true
                horizontalAlignment: Label.AlignHCenter
                font.family: fontLoader.name
            }
    
            GridView {
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                Component {
                    id: changeLabel1
                    Label {
                        text: changeText
                        Layout.fillWidth: true
                        font.family: fontLoader.name
                        wrapMode: Label.Wrap
                        onTextChanged: {
                            if(text.indexOf("**") != -1)
                            {
                                font.bold = true
                                horizontalAlignment = Label.AlignHCenter
                                Material.foreground = Material.color(Material.Pink)
                            }
                        }
                    }
                }
    
                model: ListModel {
                    ListElement { type: "0.10.21"; changeText: "** 0.10.28 **"; elem: "Cambio"}
                    ListElement { type: "0.10.21"; changeText: "Añadido resistro de cambios en la aplicación"; elem: "Cambio"}
                    ListElement { type: "0.10.21"; changeText: "Añadido botón de seleccionar todos en la sección de Base de Datos"; elem: "Cambio"}
                    ListElement { type: "0.10.21"; changeText: "Modificado el estilo de las letras de la aplicación"; elem: "Cambio"}
                    ListElement { type: "0.10.21"; changeText: "Modificado los iconos internos de la aplicación"; elem: "Cambio"}
                }
                cellWidth: okButton.width
                cellHeight: 20
                delegate: changeLabel1
            }
    
                RowLayout {
                    spacing: 0
                    Button {
                        id: okButton
                        text: "OK"
                        Layout.fillWidth: true
                        highlighted: true
                        onClicked: {
                            mainPopup.close()
                        }
                    }
                }
        }
    }
    
    


  • Hi @Blaster ,
    please try to give an explicit width to the Label

    GridView {
    id:_view
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                Component {
                    id: changeLabel1
                    Label {
                        text: changeText
    width : _view.width
    


  • @LeLev I already tried that. But look what happens:
    alt text



  • Solved thanks to @LeLev.

    Popup {
    id: mainPopup
    property int _spacing : 15
    height: parent.height * 2 / 3
        width: parent.width * 5 / 6
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
    Material.theme: Material.Dark
    modal: true
    
    contentItem: ColumnLayout {
        id: mainColumn
        Label {
            Layout.fillWidth: true
            text: "Cambios de en la aplicación"
    
        }
    
        ListView {
            id:view
            Layout.fillWidth: true
            Layout.fillHeight: true
            model: ListModel {
                ListElement { type: "0.10.21"; changeText: "**0.10.21**"; elem: "Cambio"}
                ListElement { type: "0.10.21"; changeText: "Modificado el estilo de las letras o el estilo de las letras de la aplicaciónModificado el estilo de las"; elem: "Cambio"}
                ListElement { type: "0.10.21"; changeText: "Modificado los iconos internos de la aplicación"; elem: "Cambio"}
            }
    delegate:
    Item{
    height: theText.paintedHeight + _spacing
    width: view.width
    Label {
    id:theText
    text: changeText
    Layout.fillWidth: true
    width: parent.width
    wrapMode: Label.Wrap
    onTextChanged: {
    if(text.indexOf("**") != -1)
    {
    font.bold = true
    horizontalAlignment = Label.AlignHCenter
    Material.foreground = Material.color(Material.Pink)
    
                        }
                    }
                }
            }
    
    
    
        }
    }
    }
    
    

Log in to reply