Problems with the size of the Popup content

Blaster

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()
                    }
                }
            }
    }
}

ODБOï

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

Blaster

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

Blaster

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)

                    }
                }
            }
        }



    }
}
}