I am trying to get QWebEngine to fill the entire window. Per this answer I am trying to use setContentsMargins(0,0,0,0); with the result below: the QWebEngine loads the page at full window size but then immediately scales down to this:
When I use setContentsMargins(1,1,1,1); with the QWebEngine in the layout, it loads correctly, with a 1 px margin. I did a test of just loading the image directly, with no margin and it loaded fine and filled the screen.
Is this my bug/issue or QWebEngine's?
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QtWebEngineWidgets>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
QVBoxLayout *mainLayout = new QVBoxLayout;
mainLayout->setContentsMargins(0,0,0,0);
ui->centralWidget->setLayout(mainLayout);
// // load and show image
// inputImg = new QImage(":/images/testScreen.jpg");
// imgDisplayLabel = new QLabel("");
// imgDisplayLabel->setPixmap(QPixmap::fromImage(*inputImg));
// imgDisplayLabel->adjustSize();
// mainLayout->addWidget(imgDisplayLabel);
view = new QWebEngineView(this);
mainLayout->addWidget(view);
QUrl url;
url = QUrl("qrc:/testScreen.html");
view->load(url);
}
This is working for me but I'm testing on windows platform.
I inlined the constructor definition here for brevity.
class MainWindow : public QWidget
{
Q_OBJECT
public:
MainWindow() {
auto webView = new QWebEngineView(this);
auto main_layout = new QVBoxLayout(this);
main_layout->setMargin(0);
main_layout->addWidget(webView);
}
};
And the html is like this:
<!DOCTYPE html>
<html style="width: 100%; height: 100%; margin: 0; padding: 0">
<body style="overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0">
</body>
</html>
Related
I want to add a colored Widget over the full QStatusBar. I added a QLabel with red background-color but there is a padding around the label, which i can't remove.
what i tried:
setSizeGripEnabled(false)
setStyleSheet("QStatusBar { border: 0px; padding: 0px; margin: 0px; }"
"QStatusBar::item { border: 0px; padding: 0px; margin: 0px; }"
layout()->setContentsMargins(0, 0, 0, 0);
Update: Example Code:
QWidget *w = new QWidget;
QHBoxLayout *layout = new QHBoxLayout;
QStatusBar *statusBar = new QStatusBar;
QLabel *label = new QLabel("Example");
w->setStyleSheet("background-color: green");
label->setStyleSheet("background-color: red");
statusBar->addPermanentWidget(label, 1);
statusBar->layout()->setContentsMargins(0, 0, 0, 0);
statusBar->setSizeGripEnabled(false);
setStatusBar(statusBar);
w->setLayout(layout);
setCentralWidget(w);
}
I think it is not possible without pointer hacking or reimplementing all QStatusBar functionality because QStatusBar implementation based on pimpl idiom, which means some implementation hidden in private headers and borders between QStatusBar widget and children widgets are hardcoded in qstatusbar.cpp
QRect ir = item->w->geometry().adjusted(-2, -1, 2, 1);
...
QStyleOption opt(0);
opt.rect = ir;
...
style()->drawPrimitive(QStyle::PE_FrameStatusBarItem, &opt, &p, item->w);
QStatusBar{
min-height: 20px;
}
use the min-height css property.
On my Windows machine text is displayed to the right of the progress bar.
On my Linux machine text appears in the middle of the progress bar.
If I apply style to progress bar, text appears inside on both systems. How do I get it to appear outside, like in default Windows style?
Here's the simplified version of the code I used to play with progress bars:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
auto widget = new QWidget;
auto layout1 = new QVBoxLayout;
widget->setLayout(layout1);
auto layout2 = new QHBoxLayout;
auto progressBar = new QProgressBar;
auto spinBox = new QDoubleSpinBox;
spinBox->setRange(0,100);
spinBox->setDecimals(1);
spinBox->setSingleStep(1);
progressBar->setRange(0, 10000);
connect(spinBox, qOverload<double>(&QDoubleSpinBox::valueChanged), progressBar,
[spinBox, progressBar]
{
progressBar->setValue(spinBox->value() * 100);
progressBar->repaint();
});
layout2->addWidget(spinBox);
layout2->addWidget(progressBar);
auto textEdit = new QPlainTextEdit;
auto stylesheet = R"(
QProgressBar {
background-color: cyan;
border-radius: 1px;
text-align: right;
}
QProgressBar::chunk {
background-color: magenta;
border-radius: 1px;
}
)";
textEdit->setPlainText(stylesheet);
connect(textEdit, &QPlainTextEdit::textChanged, progressBar,
[textEdit, progressBar]
{
progressBar->setStyleSheet(textEdit->toPlainText());
});
layout1->addLayout(layout2);
layout1->addWidget(textEdit, 1);
setCentralWidget(widget);
}
The solution is to use a margin. If you change the QProgressBar section of your stylesheet to this:
QProgressBar {
background-color: cyan;
border-radius: 1px;
text-align: right;
margin-right: 4em;
}
then the right end of the progress bar will stop short of the text (which is right-aligned), resulting in the effect you are looking for.
I changed a QPushButton into a drop-down menu. My codes are as follows:
m_menu = new QMenu(this);
m_addAction = new QAction(m_menu);
m_delAction = new QAction(m_menu);
m_addAction->setText(QObject::tr("add"));
m_delAction->setText(QObject::tr("del"));
m_menu->addAction(m_addAction);
m_menu->addAction(m_delAction);
m_menu->setStyleSheet("\
QMenu {\
background-image: url(:/img/tanchu-1.png);; /*background-image*/\
border: 3px solid rgb(235,110,36);/*menu border*/\
}\
QMenu::item {\
font-size: 10pt; \
color: rgb(225,225,225);\
border: 3px solid rgb(60,60,60);\
background-image: url(:/img/tanchu-1.png);\
padding:160px 160px;\
margin:2px 2px;\
}\
QMenu::item:selected { \
background-color:rgb(235,110,36);\
}\
QMenu::item:pressed {\
border: 1px solid rgb(60,60,61); \
background-color: rgb(220,80,6); \
}\
");
ui->pushButton->setMenu(m_menu);
and the button I get looks like this. There is a black drop-down arrow in the lower right corner.
But now the problem is that when I remove the drop-down arrow from the drop-down menu by using
ui->pushButton->setStyleSheet("QPushButton::menu-indicator{image:none;}");
the border-image that I set to the QPushButton with QSS border-image: url(:/img/btn_mid_0.png);disappears like image2 . The drop-down arrow and the border-image disapper together. How do I remove the drop-down arrow while maintaining the border-image I set before?
Besides, the The width of the submenu does not change with the qpushbutton like image3. How can I set the width of the drop-down menu to be as wide as the QPushButton?
Thanks!
All my codes are as follows:
mainwindow.h:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QPushButton>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = nullptr);
~MainWindow();
private slots:
private:
Ui::MainWindow *ui;
QMenu *m_menu;
QAction *m_addAction;
QAction *m_delAction;
QPushButton *m_pushButton;
void addFunc();
void delFunc();
};
#endif // MAINWINDOW_H
mainwindow.cpp:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QMenu>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
m_menu = new QMenu(this);
m_addAction = new QAction(m_menu);
m_delAction = new QAction(m_menu);
m_addAction->setText(QObject::tr("add"));
m_delAction->setText(QObject::tr("del"));
m_menu->addAction(m_addAction);
m_menu->addAction(m_delAction);
connect(m_addAction, &QAction::triggered, this, &MainWindow::addFunc);
connect(m_delAction, &QAction::triggered, this, &MainWindow::delFunc);
m_menu->setStyleSheet("\
QMenu {\
background-image: url(:/img/tanchu-1.png);; /*background-image*/\
border: 3px solid rgb(235,110,36);/*menu border*/\
}\
QMenu::item {\
font-size: 10pt; \
color: rgb(225,225,225);\
border: 3px solid rgb(60,60,60);\
background-image: url(:/img/tanchu-1.png);\
padding:160px 160px;\
margin:2px 2px;\
}\
QMenu::item:selected { \
background-color:rgb(235,110,36);\
}\
QMenu::item:pressed {\
border: 1px solid rgb(60,60,61); \
background-color: rgb(220,80,6); \
}\
");
ui->pushButton->setMenu(m_menu);
ui->pushButton->setStyleSheet("QPushButton::menu-indicator{image:none;}");
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::addFunc()
{
qDebug() << "addFunc";
}
void MainWindow::delFunc()
{
qDebug() << "delFunc";
}
Just set all the button CSS in one place, either in the QtCreator/Designer properties, or in the C++ code, not both. Basically your C++ CSS is overriding what you set in designer view.
In Designer view just use something like this for the styleSheet property:
QPushButton { border-image: url(:/img/btn_mid_0.png); }
QPushButton::menu-indicator { image: none; }
Or the same thing in C++ but with quotes :)
As for the menu styling... I'm not sure what's going on in there now (looks strange!) but the simplest way to have their sizes match is to set the size for both explicitly, either in CSS (width: XXXpx;) or in C++ (QWidget::setFixedWidth(XXX)). The C++ version may work better if the button is managed by a layout, since what happens with CSS size properties then gets vague. For CSS sometimes min-width and/or max-width work better than just width.
I need to create simple monochromatic button, just black frame with black text (I know, with 1bit it will be ugly) on white background. Is there any method which doesn't need paintEvent to be re-implemented?
The best way is using your own style sheet.
A basic example could be the following one. In this example, we set a style with white background, black border and black text. The opposite when the user presses the button.
Depending on your requirements, you could set the style for states like disabled, checked or hover.
main.cpp
#include <QtWidgets>
#include "mainwindow.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
MainWindow window;
window.show();
return app.exec();
}
mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QtWidgets>
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow();
};
#endif
mainwindow.cpp
#include <QtWidgets>
#include "mainwindow.h"
MainWindow::MainWindow()
{
QWidget *centralWidget = new QWidget(this);
QHBoxLayout *layout = new QHBoxLayout;
QPushButton *pushButton = new QPushButton("PushButton");
pushButton->setStyleSheet(
"QPushButton {"
" background-color: white;"
" border: 1px solid black;"
" color: black;"
" outline: none;"
"}"
"QPushButton:pressed {"
" background-color: black;"
" border: 1px solid white;"
" color: white;"
"}"
);
layout->addWidget(pushButton);
centralWidget->setLayout(layout);
setCentralWidget(centralWidget);
}
Good examples here and here.
I'm messing around in the QT UI designer and trying to add a horizontal layout box around some buttons and a spacer. But I'm getting some weird results:
Here's the before image:
And here's the after image:
Not only did it not retain the order of the items, it also changed the style of the minus button to this weird gray box.
How do I keep it from doing that? Or how do I change the button's style back to what it was before it was added to the constraint?
I tried in Qt designer and it works. I think something overwrites your button styles.
Also have you tried to code buttons style? To use this code you need to create empty QWidget window and place two buttons.
form.h
#ifndef FORM_H
#define FORM_H
#include <QWidget>
#include <QHBoxLayout>
#include <QMessageBox>
namespace Ui {
class Form;
}
class Form : public QWidget
{
Q_OBJECT
public:
explicit Form(QWidget *parent = 0);
~Form();
public slots:
void plusClicked();
void minusClicked();
private:
Ui::Form *ui;
QHBoxLayout *horizontalLayout;
};
#endif // FORM_H
form.h
#include "form.h"
Form::Form(QWidget *parent) :
QWidget(parent),
ui(new Ui::Form)
{
ui->setupUi(this);
ui->pushButton->setText("+");
ui->pushButton->setStyleSheet("background-color: white; border-style: solid; border-width: 1px; border-radius: 8px; border-color: gray; width: 60px; height: 30px; font-weight: bold; font-size: 14pt;");
ui->pushButton_2->setText("-");
ui->pushButton_2->setStyleSheet("background-color: white; border-style: solid; border-width: 1px; border-radius: 8px; border-color: gray; width: 60px; height: 30px; font-weight: bold; font-size: 14pt;");
horizontalLayout = new QHBoxLayout(this);
horizontalLayout->addStretch();
horizontalLayout->addWidget(ui->pushButton);
horizontalLayout->addWidget(ui->pushButton_2);
this->setLayout(horizontalLayout);
connect(ui->pushButton, &QPushButton::clicked, this, &Form::plusClicked);
connect(ui->pushButton_2, &QPushButton::clicked, this, &Form::minusClicked);
}
void Form::plusClicked()
{
QMessageBox::information(this, "Form", "Plus button clicked!", QMessageBox::Ok);
}
void Form::minusClicked()
{
QMessageBox::information(this, "Form", "Minus button clicked!", QMessageBox::Ok);
}
Form::~Form()
{
delete ui;
}
main.cpp
#include "form.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Form mainWindow;
mainWindow.show();
return a.exec();
}