I just faced an interesting challenge in Qt, which I tried to solve for days now. I spent hours to find a similar problem on the internet, but with no success. In general, it's a simple GUI with a WebEngineView (based on QtWebEngine 1.4), which displays an HTML file with one dropdown (select) item, which should be rotated by 180° for an embedded device. But if the webengine is rotated, the content of the dropdown menu gets displayed outside of the webengine.
I created an SSCCE in Qt to provide you a "working" example. You could download the project with: https://www.dropbox.com/s/eafnl39jsrny4ro/dropdown_test.zip?dl=0
I did all following tests with Qt version 5.8 (Webengine based on chromium version 45) and Qt 5.9 (Webengine based on chromium version 56).
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <qtwebengineglobal.h>
#include <QtCore/QCoreApplication>
#include <qdebug.h>
using namespace std;
int main(int argc, char *argv[])
{
// Enabling makes Qt scale the main (device independent)
// coordinate system according to display scale factors
// provided by the operating system.
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
// contains the main event loop, where all events from the
// window system and other sources are processed and dispatched.
QGuiApplication app(argc, argv);
qDebug() << "platformName: " << app.platformName() << endl;
// Current output: eglfs
//
// eglfs is a platform plugin for running Qt5 applications on top of EGL and
// OpenGL ES 2.0 without an actual windowing system (like X11 or Wayland).
// For more information, see EGLFS.
// Other possibilities:
// directfb or linuxfb
// Environment variable QT_QPA_EGLFS_ROTATION doesn't work for QtQuick applications!
// Qt Quick applications can apply transformations in their QML scene instead.
// (But the transformation doesn't work for comboboxes/dropbdowns on a HTML website
// invoked by the WebEngineView as demonstrated in file main.qml)
// sets up an OpenGL Context that can be shared between threads.
QtWebEngine::initialize();
// provides a convenient way to load an application from a single QML file
QQmlApplicationEngine engine;
// load GUI
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
// enters the main event loop
return app.exec();
}
index.html:
<!DOCTYPE html>
<html>
<body style="background-color:red;">
<center>
<div>
<p>This is the content of index.html</p>
</div>
<div>
<select>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
<div>
</center>
</body>
</html>
Version 1 (Of main.qml): In the default landscape orientation, everything works fine and like expected.
main.qml:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4
Window {
id: rootWin
width: 1280
height: 800
Item {
WebEngineView {
width: parent.width/4
height: parent.height/4
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
}
}
}
Version 2 (Of main.qml): (Try to rotate the WebEngineView on behalf of an Item) If I rotate the "Item", in which the WebEngineView is located, the dropdown content gets displayed at an unexpected position (Even outside the WebEngineView area)
main.qml:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4
Window {
id: rootWin
width: 1280
height: 800
Item {
rotation: 180
WebEngineView {
width: parent.width/4
height: parent.height/4
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
}
}
}
Version 3 (Of main.qml): (Try to rotate the WebEngineView on behalf of a Rectangle) If I rotate the "Rectangle", in which the WebEngineView is located, the dropdown content gets displayed at an unexpected position (Even outside the WebEngineView area)
main.qml:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4
Window {
id: rootWin
width: 1280
height: 800
Rectangle {
transform: Rotation { origin.x: rootWin.width/2; origin.y: rootWin.height/2; angle: 180 }
WebEngineView {
width: parent.width/4
height: parent.height/4
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
}
}
}
Could anybody tell me, why the content of my dropdown menu appears at a random position, if i rotate the parent object of my webengine?
