PDA

View Full Version : 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
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 )



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 ?
anda_skoa
9th August 2016, 13:07
One thing that is wrong in the most recent code snippet is


anchors.fill: searchview

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


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


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

}

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