webview cut off vertically in mobile devices

**arcade** · 8th August 2016, 05:47

as you can see in the gif below , the webview is cut in half . If i rotate the mobile it shows complete webview but hides the sidebar

GIF : https://giphy.com/gifs/l0MYyfUxIgogGpasU

qml code : https://ghostbin.com/paste/v45sp

**anda_skoa** · 8th August 2016, 09:57

Hard to tell with all the indentation being off, but the neither the parent item of the webview nor the Flickable around it seem to have a size.

Cheers,
_

**arcade** · 8th August 2016, 13:40

i did ctrl + i to indent it in qt creator . it should look fine now

https://ghostbin.com/paste/v45sp

what should i do ? is there need to provide the size to webview and Flickable ?

**anda_skoa** · 8th August 2016, 15:30

The WebView is anchored to fill an Item without size, so the WebView should also not have any size.
It is a miracle you are seeing anything at all.

Don't you want that item to be as large as the webview?
I.e. the other way around?

Also, the Flickable's size is the size of how much you see of its content.

Why do you have it at all? Your code seems to push the Flickable's content item onto the stackview, basically making the Flickable have no content?
Did you want to push the Flickable?

Cheers,
_

**arcade** · 8th August 2016, 16:41

Originally Posted by anda_skoa

Why do you have it at all? Your code seems to push the Flickable's content item onto the stackview, basically making the Flickable have no content?
Did you want to push the Flickable?

Cheers,
_

i just want to show proper webview , like any other normal apps .

i have removed the flickable {} from the code . it was completely unecessary .

**anda_skoa** · 8th August 2016, 17:00

If you wrap the Item which you want to push onto the stack in a Component {}, then it won't be part of the Window's original content.
I.e. you would be pushing a new object instead of taking the one already instantiated as a child of the window.

Like the example in the StackView documentation, but using the Item around the WebView instead of the MouseArea in the example.

Cheers,
_

**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

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

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