QTabwidget's tab text alignment not working - qt

i am trying to show the opened tab text in left .i wrote that in stylesheet.but it is not working.
here is the stylesheet i used
QTabWidget QTabBar{
background-color: #373738;
height: 30px;
}
QTabWidget QTabBar::tab{
text-align: left;
background-color: #136ba2;
border-style: 1px rgb(67, 67, 67);
height: 30px;
width: 130px;
color: #136ba2;
padding: 0px 5px 0px 5px;
}
QTabWidget QTabBar::tab:selected{
background-color: #5A5B5C;
font-weight: bold;
color: #ffffff;
}
QTabWidget QTabBar::tab:!selected{
background-color:#353536;
color: #B4B4B4;
}
QTabWidget QTabBar::tab:hover{
background-color: #5A5B5C;
color: #ffffff;
}
here is an image

I think it is not possible with stylesheet, according to the doc :
text-align [...] This property is currently supported only by QPushButton and QProgressBar.
https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties

This can be accomplished using the tab button widget to show the tab text.
Have a label, with left aligned text:
QLabel * button = new QLabel("text");
button->setAlignment(Qt::AlignLeft);
Set the tab text to empty string if necessary:
ui->tabWidget->tabBar()->setTabText(index, "");
Set the label as the tab button widget:
ui->tabWidget->tabBar()->setTabButton(index, QTabBar::LeftSide, button);
You can still style the label, adding a QLabel entry in the tab widget stylesheet:
QLabel{ color: white; }
Only problem here: no way to style the label text depending on selection (i.e. making the selected tab text bold) using CSS. But still feasible catching the tab widget currentChanged signal:
void Form::on_tabWidget_currentChanged(int index)
{
for(int i=0; i<ui->tabWidget->tabBar()->count(); i++)
{
QWidget * button = ui->tabWidget->tabBar()->tabButton(i, QTabBar::LeftSide);
if(button != nullptr)
{
QFont font = button->font();
font.setBold(i == index);
button->setFont(font);
}
}
}

One workaround(not clean method) I found is add some extra space at the end of the title;
QString tabTitle = "Page 1 ";
Will move the text towards left.

Related

How to change the setPage of scrollBar in Qt?

I create a list of 64 items using scrollAreaWidgetContents on Qt the list is like this:
I want when I press the scroll down arrow I got 4 sentences not 5. So for one click down or up of the arrow I skip one sentence.
The code of scrollArea's stylesheet:
QFrame{
border:solid;
}
QScrollBar:vertical {
width: 15px;
margin: 30px 0 30px 0;
border-style: solid;
}
QScrollBar::handle:vertical {
min-height: 30px;
border: solid ;
}
QScrollBar::add-line:vertical {
subcontrol-position: bottom;
subcontrol-origin: margin;
border: solid ;
height: 30px;
}
QScrollBar::sub-line:vertical {
subcontrol-position: up;
subcontrol-origin: margin;
border: solid ;
height: 30px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar::up-arrow:vertical
{
image: url(icons/Freccia_Su.png);
}
QScrollBar::down-arrow:vertical
{
image: url(icons/Freccia_Giu.png);
}
I found the setPage in the documentation of QScrollBar but I don't understand how to add it? Can someone help me to fix this issue?
I think you may be expecting too much from QScrollArea. I can't tell from your question how you have set the contents of the QScrollArea, but if you have set a QTextEdit as its widget, then the QScrollArea doesn't know anything about the size of the text, for example.
You may be better off looking at QListWidget:
//assuming a ui with a QListWidget called listWidget
ui.setupUi(this);
QStringList items;
for (int i = 0; i < 100; i++)
items << "item " + QString::number(i);
ui.listWidget->insertItems(0, items);
This will automatically scroll by one item per click of the scroll bars.
You can create more complicated list entries using QListWidgetItem (see the docs for QListWidget).
The items can contain widgets themselves, so you can have a custom widget with radiobuttons etc, and use QListWidget::setItemWidget() to set it on each item. The scrolling will take the widget size into account.

QRadioButton color change on Selected and deselected Qt

i am trying to change the color of radiobutton on selected and deselected as
QtStylesheet :Qt Stylesheet
but In this link it only refer to Loading a Image but how could I change it color and without loading Image and change border color or styling radiobutton
the requirement is attached in the Image :
Read documentation carefully. It describes all you need. It even almost described your case, the only difference is images instead of colours.
Style sheet for your case is like this:
QRadioButton {
background-color: gray;
color: white;
}
QRadioButton::indicator {
width: 10px;
height: 10px;
border-radius: 7px;
}
QRadioButton::indicator:checked {
background-color: red;
border: 2px solid white;
}
QRadioButton::indicator:unchecked {
background-color: black;
border: 2px solid white;
}
Setting style sheet to next works for me:
QRadioButton:checked{
background-color: red;
}
QRadioButton:unchecked{
background-color: black;
}
Setting style sheet to QRadioButton::indicator:checked doesn't work, because this only changes the settings of the indicator.
If you want to change the background color of your radiobutton when he's selected you should use both slots and stylesheet.
I will name your button MyButton.
In your .h you will find :
private :
QRadioButton MyButton;
private slots:
void changeColorMyButton();
and in your .cpp add in the setup of your Mainwindow :
QObject::connect(MyButton,SIGNAL(clicked(bool)),this,SLOT(changeColorMyButton));
Your button is now connected to the signal clicked and when you will click on your button, the slot changeColorMyButton will be executed. You can now customize your slot.
void Mainwindow::changeColorMyButton()
{
if(this.MyButton.isChecked())
{
this.MyButton->setStyleSheet("background-color: black");
}
else
{
this.MyButton->setStyleSheet("background-color: yellow");
}
}

Tab close button position

I want to style my tabs in my Qt app as follows:
I used following style sheet:
QTabBar{background-color: #fff; border-top: 0px;}
QTabBar::tab {
border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
margin-left: 2px;
border-right: 17px;
border-top: 5px;
border-bottom: 5px;
font: 400 9.2pt "Segoe UI";
color: #ccc;
padding: 0px 13px 0px 5px;
max-height: 26px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
border-image: url(:/New_UI/tab_active.png) 6 17 6 2;
}
QTabBar::close-button {
image: url(:/New_UI/tab_close.png);
subcontrol-origin: padding;
subcontrol-position: right;
width: 13px;
height: 13px;
}
The result is as follows (close button position is not as I wanted):
What am I doing wrong & how could I get my desired result ?
EDIT : I know this post is old, but I hope it could help someone else.
After a couple of tests, I think there is one way to do this, but it does not use Qt style sheets :
Subclass your QTabWidget to have complete access to the protected features
Create your own QWidget or QPushButton as your close button
Manage the position of your button with the stylesheet property (margin-right for example)
Add your button to the tab tabBar()->setTabButton(index, QTabBar::RightSide, closeButton);
The code I used for the test :
MyTab::MyTab(QWidget *parent) : QTabWidget(parent)
{
/// Create your button
QPushButton *close = new QPushButton(this);
// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab { width : 150px;}");
// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");
// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);
}
Finally, in the MainWindow, I added my own TabWidget to a layout :
ui->layout->addWidget(new MyTab(this));
The result :
But now you will have to handle the close action manually by connecting the button and get the index for a removeTab(index) call.
I am doing the same thing as you do, here is my stylesheet:
QTabBar::close-button{
image:url(:tabclose.png);
margin-right:4px;
}
Do not use "width" and "height" property, those two doesn't work here, setting a "image:url()" on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).
Use "margin-right" property to control the distance from the right edge of the tab;
Add a custom button is a good answer.but if you use margin to decide close-button's position,the close-button's mouse area will be abnormal,so I add a SpacerItem and button in a widget,finally add this widget to TabWidget.
void TabBarCloseable::tabInserted(int index)
{
QWidget *widget = new QWidget(this);
QHBoxLayout *layout = new QHBoxLayout(this);
widget->setLayout(layout);
QToolButton *closeBtn = new QToolButton(this);
layout->addWidget(closeBtn);
layout->insertSpacing(1, 15);
closeBtn->setStyleSheet("max-height: 16px; max-width: 16px;");
this->setTabButton(index, QTabBar::RightSide, widget);
QTabBar::tabInserted(index);
}
You have wrong padding
Top
QTabBar::tab {
min-width: 25ex;
padding: 10px 50px 10px 10px;
}
buttom
QTabBar::tab {
min-width: 25ex;
padding: 10px 0px 10px 10px;
}
This is a pure stylesheet solution, without creating the buttons manually:
QTabBar::close-button {
image: url(:/tab-close.png);
padding-left: -13px;
}
If you check the Qt source, the image painting code uses only the padding values, not the margin values.

Styling QTabWidget background with CSS

I wish to set a custom background color for active QTabWidget tab. Unfortunately, I can't figure out the desired selector.
On Linux the following hack works:
QTabWidget::tab > QWidget > QWidget {
background: #fff;
}
But on Windows I have to use one more QWidget:
QTabWidget::tab > QWidget > QWidget > QWidget {
background: #fff;
}
Is there a "real" solution?
You have to use QTabBar and not QTabWidget. The selectors you should use are the following:
// Control the tab-bar with respect to the QTabWidget
QTabWidget::tab-bar {
left: 5px;
}
// Control the look of the tab in general
QTabBar::tab {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
// Control the look of the tab when it is selected
QTabBar::tab:selected
{
// Add css parameters
}
// Control the look of the tab when hovering over it
QTabBar::tab:hover
{
// Add css parameters
}
// Control the look of the tab when it is not selected
QTabBar::tab:!selected
{
// Add css parameters
}

Qt - QPushButton margin of icon needs to stay the same

I create a set of buttons using the function below with text, buttonName, that can change in width. The icon that appears when I click one of the buttons then justfies itself based on the width of the text; how do I make the icon stay the same margin from the right of the button regardless of text? Don't say custom delegate, because I haven't been able to figure out how to implement that!
QPushButton *LayoutCreator::createButton(const QString &buttonName) {
QIcon ico;
ico.addPixmap(QPixmap(":images/images/on.png"), QIcon::Normal, QIcon::On);
ico.addPixmap(QPixmap(":images/images/off.png"), QIcon::Normal, QIcon::Off);
QPushButton* button = new QPushButton(buttonName);
button->setStyleSheet("QPushButton { height: 70px; font-size: 20px; }");
button->setIcon(ico);
button->setLayoutDirection(Qt::RightToLeft);
button->setIconSize(QSize(32,32));
button->setCheckable(true);
return button;
}
Try adding
text-align: right;
to your button style sheet.

Resources