webview cut off vertically in mobile devices

**arcade** · 9th August 2016, 12:00

hello

.

I tried a lot but was not able to do it

i tried something like this ( whole code same as in ghostbin )

Qt Code:

Switch view

Component{
        id:searchview
        Item{
            id:load
            AnimatedImage {
                id: loading
                z:1000
                anchors.centerIn: webview
                source: "qrc:/images/loading.gif"
                visible: false
            }
            WebView{
                id: webview
                visible: false
                anchors.fill: searchview
                onUrlChanged: {
                    //  console.log(searchwebview.url);
 
                    extract_json();
 
                }
                onLoadingChanged: {
                    if(webview.loadProgress==="100" && url.toString().match("about:blank")){
                        loadHtml("<html><head><title></title></head><body><center>Page not Found</center></body></html>");
                    }
                }
            }
 
        }
    }

Component{
        id:searchview
        Item{
            id:load
            AnimatedImage {
                id: loading
                z:1000
                anchors.centerIn: webview
                source: "qrc:/images/loading.gif"
                visible: false
            }
            WebView{
                id: webview
                visible: false
                anchors.fill: searchview
                onUrlChanged: {
                    //  console.log(searchwebview.url);

                    extract_json();

                }
                onLoadingChanged: {
                    if(webview.loadProgress==="100" && url.toString().match("about:blank")){
                        loadHtml("<html><head><title></title></head><body><center>Page not Found</center></body></html>");
                    }
                }
            }

        }
    }

To copy to clipboard, switch view to plain text mode

error :
qrc:/main.qml:20 Invalid alias reference. Unable to find id "webview"

If possible can you do it for me ?

**anda_skoa** · 9th August 2016, 13:07

One thing that is wrong in the most recent code snippet is

Qt Code:

Switch view

anchors.fill: searchview

anchors.fill: searchview

To copy to clipboard, switch view to plain text mode

because anchors only work with siblings or the parent.
You probably wanted to write

Qt Code:

Switch view

anchors.fill: parent

anchors.fill: parent

To copy to clipboard, switch view to plain text mode

Also if you put AnimatedImage after the WebView, then you don't have to set "z" at all.

As for the new error: do you need that alias property?

Cheers,
_

**arcade** · 9th August 2016, 13:17

i need that alias property because : it helps me in giving value to p_url in extract_json function

below code is original code without any changes .
code : https://ghostbin.com/paste/yw26a

can you use the above code to solve the issue .

P.S. above code does not even contain the component{} that you suggested . WHY ? : because i think i am messing it more

**arcade** · 10th August 2016, 05:25

@andka_skoa please help !!

**anda_skoa** · 10th August 2016, 10:51

Originally Posted by arcade

i need that alias property because : it helps me in giving value to p_url in extract_json function

You could move it into the WebView element since it only seems to be needed there.

In any case, have you tried breaking down the code to the minimum that shows the problem?

E.g. does it with with just a WebView in the window.
With the WebView in an Item in the Window.
With the Item in a StackView as the initialItem.
and so on

Cheers,
_

**arcade** · 15th August 2016, 05:59

Originally Posted by anda_skoa

have you tried breaking down the code to the minimum that shows the problem?

Cheers,
_

Yes , i also have one page that is very simple and has same issue ( i.e. webview cut in half ) . This page is for reading the pages offline

below is the code :

Qt Code:

Switch view

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0
import en.wtl.org 1.0
import en.wtl.model 1.0
import QtWebView 1.1
 
Pane{
 
    id: view
    property string local_url : ""
    property string pid : ""
 
 
    ListView {
        width: 200; height: 250
 
        model: myModel
        delegate: Component{
            RowLayout{
                Button {
                    id: name
                    text: title
                    visible: true
                    Layout.fillWidth: true
                    onClicked: {
 
                        local_url = path+"/WTL_appdata/"+id+"/"+id+".html"
                        console.log(local_url);
                        pid = id;
                        //webview.url = local_url
                        webview.visible  = true
                    }
 
                    }
                }
 
            }
        }
 
 
 
 
WebView{
    id: webview
    url: "file:///"+path+"/WTL_appdata/"+pid+"/"+pid+".html"
    visible: false
    anchors.fill: parent
 
    }
 
}

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0
import en.wtl.org 1.0
import en.wtl.model 1.0
import QtWebView 1.1

Pane{

    id: view
    property string local_url : ""
    property string pid : ""


    ListView {
        width: 200; height: 250

        model: myModel
        delegate: Component{
            RowLayout{
                Button {
                    id: name
                    text: title
                    visible: true
                    Layout.fillWidth: true
                    onClicked: {

                        local_url = path+"/WTL_appdata/"+id+"/"+id+".html"
                        console.log(local_url);
                        pid = id;
                        //webview.url = local_url
                        webview.visible  = true
                    }

                    }
                }

            }
        }




WebView{
    id: webview
    url: "file:///"+path+"/WTL_appdata/"+pid+"/"+pid+".html"
    visible: false
    anchors.fill: parent

    }

}

To copy to clipboard, switch view to plain text mode

**anda_skoa** · 15th August 2016, 07:12

Since I have no idea what "Pane" is, have you tried it with Item as the top level, with height and width set to some values and running that in qmlscene?

Cheers,
_

**arcade** · 16th August 2016, 13:04

Originally Posted by anda_skoa

have you tried it with Item as the top level, with height and width set to some values and running that in qmlscene?

Cheers,
_

yes i tried with Item as top level with specific width and height , but this time it was even more cut off .

**anda_skoa** · 17th August 2016, 19:06

Can you provide an example that can be run by others?
E.g. a QML file that can be run with qmlscene?

Cheers,
_

Thread: webview cut off vertically in mobile devices

Thread Tools

Search Thread

Display

Hybrid View

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Re: webview cut off vertically in mobile devices

Similar Threads

Comparing Qt Mobile with native mobile development

Solid Unified UI for all major mobile platforms iOS/Android/Win Mobile

Vertically flipped QImage.

mobile extensions problems in Qt mobile app

Desktop environment for mobile devices

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions