webview cut off vertically in mobile devices

Printable View

8th August 2016, 05:47
arcade

webview cut off vertically in mobile devices

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
8th August 2016, 09:57
anda_skoa

Re: webview cut off vertically in mobile devices

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,
_
8th August 2016, 13:40
arcade

Re: webview cut off vertically in mobile devices

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 ?
8th August 2016, 15:30
anda_skoa

Re: webview cut off vertically in mobile devices

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,
_
8th August 2016, 16:41
arcade

Re: webview cut off vertically in mobile devices

Quote:

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 .
8th August 2016, 17:00
anda_skoa

Re: webview cut off vertically in mobile devices

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,
_

Re: webview cut off vertically in mobile devices

hello :) .

I tried a lot but was not able to do it :(

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

Code:

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>");
                    }
                }
            }
 
        }
    }

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

If possible can you do it for me ?

9th August 2016, 13:07
anda_skoa

Re: webview cut off vertically in mobile devices
One thing that is wrong in the most recent code snippet is
Code:

anchors.fill: searchview
because anchors only work with siblings or the parent.
You probably wanted to write
Code:

anchors.fill: parent
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,
_
9th August 2016, 13:17
arcade

Re: webview cut off vertically in mobile devices

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 :(
10th August 2016, 05:25
arcade

Re: webview cut off vertically in mobile devices

@andka_skoa please help !!
10th August 2016, 10:51
anda_skoa

Re: webview cut off vertically in mobile devices

Quote:

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,
_

Re: webview cut off vertically in mobile devices

Quote:

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 :

Code:

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

15th August 2016, 07:12
anda_skoa

Re: webview cut off vertically in mobile devices

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,
_
16th August 2016, 13:04
arcade

Re: webview cut off vertically in mobile devices

Quote:

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 .
17th August 2016, 19:06
anda_skoa

Re: webview cut off vertically in mobile devices

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

Cheers,
_