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.
Related
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.
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.
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");
}
}
In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with css?
.v-textfield.textfield-default {
border: none;
border-bottom: 1px solid $non-active-field;
outline: none;
height: 3rem;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}
.v-textfield.textfield-default:focus {
border-bottom: 1px solid $default;
}
.v-caption-default-caption {
color: purple; //changes the text to purple
top: 0.8rem;
left: 0.75rem;
font-size: 1rem;
cursor: text;
transition: .2s ease-out;
}
.v-caption-default-caption:focus {
color: red; //is never called
}
.v-caption-default-caption:active {
color: blue; //is never called either
}
Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.
From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.
Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.
Step 1: The component
public class MyTextFieldsComponent extends VerticalLayout {
public MyTextFieldsComponent() {
// the text-fields
TextField myFirstField = new TextField("My first caption");
TextField mySecondField = new TextField("My second caption");
// when focused, add our custom style
FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");
// when blurred, remove the custom style
FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");
// use the above listeners
myFirstField.addFocusListener(focusListener);
mySecondField.addFocusListener(focusListener);
myFirstField.addBlurListener(blurListener);
mySecondField.addBlurListener(blurListener);
// add the text-fields to the UI
addComponent(myFirstField);
addComponent(mySecondField);
}
}
Step 2: The style
.v-caption-red-caption {
color: red;
}
Step 3: The result
I want to know how can I set a style sheet for a Phonon::SeekSlider as like as a QSlider in Qt. With QSliders we can assign so many attributes by easily calling something like this.
QSlider::handle:horizontal {
background:white;
border: 1px solid white;
width: 6px;
margin-top: -2px;
margin-bottom: -2px;
border-radius: 0px;
}
But how can I do this same with SeekSlider.I cannot set attributes by calling Phonon::SeekSlider or QSlider. Only I can do is set attributes by calling QWidget {} and it has no use on SeekSlider. I must be able to customize the handle,page etc...
Please anyone has ideas...Help me !!!
You can access Phonon::SeekSlider slider control like that:
Phonon--SeekSlider > QSlider {
}
Phonon--SeekSlider > QSlider::handle {
}
etc.