I'm using what I believe is a pretty standard example of a WYSIWYG editor from graphics-dojo built using a QWebView. The source can be found here
I'm trying to disable the word wrapping in the QWebView so if an element extends beyond the width of the window, a horizontal scrollbar will appear and no wrapping will occur. By default it appears that the text in the QWebView wraps at all window widths except when the width is resized to under about 100 pixels which is when the horizontal scrollbar appears. Given this behavior I know the horizontal scrollbar is enabled. I've looked at QWebView, QWebFrame, and QWebPage and can't seem to find any references to word wrapping. I wonder if it is a property of the underlying WebKit.
In summary: How can I disable word wrapping on a QWebView so that a horizontal scrollbar appearing is the default behavior?
The QWebView is contained in the htmleditor.ui file like this.
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>659</width>
<height>398</height>
</rect>
</property>
<property name="windowTitle">
<string>HTML Editor</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QVBoxLayout" name="verticalLayout">
<property name="margin">
<number>0</number>
</property>
<item>
<widget class="QTabWidget" name="tabWidget">
<property name="tabPosition">
<enum>QTabWidget::South</enum>
</property>
<property name="tabShape">
<enum>QTabWidget::Rounded</enum>
</property>
<property name="currentIndex">
<number>0</number>
</property>
<property name="documentMode">
<bool>true</bool>
</property>
<widget class="QWidget" name="tab">
<attribute name="title">
<string>Tab 1</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_2">
<property name="margin">
<number>0</number>
</property>
<item>
<widget class="QWebView" name="webView">
<property name="url">
<url>
<string>about:blank</string>
</url>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="tab_2">
<attribute name="title">
<string>Tab 2</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_3">
<property name="margin">
<number>0</number>
</property>
<item>
<widget class="QPlainTextEdit" name="plainTextEdit">
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
<property name="readOnly">
<bool>true</bool>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
</item>
</layout>
</widget>
...
Related
Why does Qt make so much space? How can I fix this? I just want to create two labels, two text boxes and a login button. I'm trying to make a login form.
Something like this:
Why does it need so much space to just have small buttons?
This is the nicest I've been able to get it to look, but even this looks terrible.
Just add a Vertical Spacer to the top and the bottom, then you will have your expected result.
If you would like to add it through the code and not in Designer, you would need to add it on the QLayout with QBoxLayout::addStretch(int stretch = 0) or QBoxLayout::addSpacing(int size), depending on your need
Do you want something like that? example
You can use spacers from Qt Designer to achieve what you want, I guess.
Below is the UI code of my example:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>683</width>
<height>408</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QGridLayout" name="gridLayout">
<item row="1" column="2">
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item row="1" column="1">
<widget class="QGroupBox" name="groupBox">
<property name="title">
<string>GroupBox</string>
</property>
<layout class="QGridLayout" name="gridLayout_2">
<item row="1" column="0">
<widget class="QLabel" name="label_2">
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
<item row="0" column="0">
<widget class="QLabel" name="label">
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
<item row="2" column="0">
<spacer name="horizontalSpacer_3">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item row="2" column="1">
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item row="0" column="1">
<widget class="QLineEdit" name="lineEdit" />
</item>
<item row="1" column="1">
<widget class="QLineEdit" name="lineEdit_2" />
</item>
<item row="2" column="2">
<spacer name="horizontalSpacer_4">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
</item>
<item row="1" column="0">
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item row="0" column="1">
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item row="2" column="1">
<spacer name="verticalSpacer_2">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>683</width>
<height>21</height>
</rect>
</property>
</widget>
<widget class="QStatusBar" name="statusbar" />
</widget>
<resources />
<connections />
</ui>
Moreover, a quick tip for you, if you are a beginner, I consider this as a mistake to use two layouts when you do not need two of them: in your example, remove the "formLayout" and format your "LoginScreen" as a QFormLayout instead.
In Qt designer, how do i center a middle widget in a vertical/horizontal/grid layout and expand its cell at the same time, what i want to get is something like this:
what i get:
One possible solution is to place the middle QPushButton in a QWidget through a layout, and then place that QWidget in the second column of the QHBoxLayout:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Form</class>
<widget class="QWidget" name="Form">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_2">
<item>
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item>
<widget class="QWidget" name="widget" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QPushButton" name="pushButton_2">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_3">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
<resources/>
<connections/>
</ui>
Output:
You're gonna need to add a horizontal spacer. And then for the spacer you can add properties. Whether it should be fixed or expanding.
So first select and add a horizontal spacer, and then when you select the horizontal spacer, in the properties widget you'll be able to set properties to it:
The way the spacer will be placed in-between two widgets, is by first dragging the spacer and placing it in between the widgets, selecting all of them and then right-click and group horizontally. This will put your widgets and the spacer in a horizontal layout:
If you want to do it in the code manually, look into QSpacerItem.
This problem is driving me insane and I can't seem to find a logical answer. I'm pretty new to this so please bear with.
I've been creating an application where I create a vertical 'navigation bar' and need to add QPushButtons dynamically. I've noticed that the
horizontal position of a label in a QVBox changes when a QPushButton is added to it.
I've created a minimal version:
Before Adding QPushButton:
Label reaches the edge of the application
After adding QPushButton:
Label width is reduced slightly
Here is the code I'm using to dynamically add the QPushButton:
void MainWindow::on_pushButton_clicked()
{
QPushButton *newButton = new QPushButton("Test");
newButton->setContentsMargins(0,0,0,0);
newButton->setStyleSheet("margin: 0; padding: 0;");
ui->verticalLayout->setMargin(0);
ui->verticalLayout->setContentsMargins(0,0,0,0);
// add new push button inside VBox
ui->verticalLayout->addWidget(newButton);
}
.ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>203</width>
<height>224</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<widget class="QWidget" name="verticalLayoutWidget">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>201</width>
<height>151</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label">
<property name="styleSheet">
<string notr="true">border: 1px solid white;</string>
</property>
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QPushButton" name="pushButton">
<property name="geometry">
<rect>
<x>10</x>
<y>180</y>
<width>181</width>
<height>32</height>
</rect>
</property>
<property name="text">
<string>Add Push Button To VBox</string>
</property>
</widget>
</widget>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
As you can see setting the margins on both the QPushButton and the layout don't seem to have any effect. Is there anyone who could shed some light on this issue?
Let's analyze your .ui with the help of Qt Designer, if we stretch the window you get the following:
As you can see the layout only affects the QLabel, so the initial button will not be handled by the layout, but the added button will be. Therefore, you do not observe a similar behavior.
The solution is to restructure the design using the following structure:
QMainWindow
└── QVBoxLayout
├── QLabel
└── QWidget
└── QVBoxLayout
└── QPushButton
You must change the size policy of the QWidget to take the minimum height by setting Maximum in Vertical Policy:
And in that second layout add the button. The .ui is the following:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>335</width>
<height>303</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QLabel" name="label">
<property name="styleSheet">
<string notr="true">border: 1px solid white;</string>
</property>
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
<item>
<widget class="QWidget" name="widget" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Maximum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>Add Push Button To VBox</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
Then it is no longer necessary to modify the button:
void MainWindow::on_pushButton_clicked()
{
QPushButton *newButton = new QPushButton("Test");
ui->verticalLayout->addWidget(newButton);
}
Obtaining the following:
I am building a QWidget with QRadioButtons at different levels. In other words, my widget contains some radio buttons and a subwidget (labeled groupBox in the screenshot) that also contains radio buttons.
Here is my problem: the radio buttons inside groupBox seem to interfere with the top level radio buttons (radioButton_1 and radioButton_2). I would expect that exactly one of radioButton_1 and radioButton_2 is checked at any given time, but it is now possible to uncheck these by clicking on the currently checked radio button.
The fix I came up with is to add setChecked(true) to the signal handler for radioButton_1.clicked() and radioButton_2.clicked(), but this seems a bit hacky.
connect(ui->radioButton_1, &RadioButton::clicked, [this]() {
ui->radioButton_1.setChecked(true);
});
connect(ui->radioButton_2, &RadioButton::clicked, [this]() {
ui->radioButton_2.setChecked(true);
});
Is there a better way to get the functionality back? Perhaps a function like setRadioButtonGroup({ui->radioButton_1, ui->radioButton_2}).
EDIT:
Per request for a MCVE, below is the form mainwindow.ui. Other files (mainwindow.cpp, main.cpp, mainwindow.h) are just the boilerplate provided when a QWidget Application is created in Qt Creator.
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QRadioButton" name="radioButton_1">
<property name="text">
<string>radioButton_1</string>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="radioButton_2">
<property name="text">
<string>radioButton_2</string>
</property>
</widget>
</item>
<item>
<widget class="QGroupBox" name="groupBox">
<property name="title">
<string>groupBox</string>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QRadioButton" name="radioButton_3">
<property name="text">
<string>radioButton_3</string>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="radioButton_4">
<property name="text">
<string>radioButton_4</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
<widget class="QStatusBar" name="statusBar"/>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
To address this, I suggest you create a QButtonGroup and add all four radio button to it.
See https://doc.qt.io/qt-5/qbuttongroup.html
I have a simple qt ui that contains
|- central widget
|- label
|- button
I would like to manually place and resize the label and button freely (using the mouse), and I just can't seem to be able to do that.
I can only resize the entire window, and the label/button stretch with it. I tried all combinations of size policies
Thanks!
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>326</width>
<height>254</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label">
<property name="text">
<string>Bla</string>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="startButton">
<property name="text">
<string>Start</string>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
try to remove
<layout class="QVBoxLayout" name="verticalLayout">
and
</layout>
but if you are working under qt creator or qt designer,
you can easily do this thing. You need to choose centralWidget and click to button Break Layout that placed under menu bar.
Check this documentation. This should be helpful to utilize Qt Designer components. It is quite possible that you don't have to do lot of work. I never used this so my help ends here.