I have a QTabWidget with a QTableWidget inside, as the example below:
But it has a "padding" (at least I think it is a padding) in the QTabWidget (marked as red in the figure).
How can I remove that or expand the QTableWidget to fill the QTabWidget area?
I am using Qt 5.3.
Try something like this :
tabwidget.setStyleSheet("QTabWidget::pane {
margin: 0px,1px,1px,1px;
border: 2px solid #020202;
border-radius: 7px;
padding: 1px;
background-color: #E6E6E3;
}");
Hope this help you
The problem seems to be related to the "pane" margin of the QTabWidget.
I solved the problem by using this on the stylesheet:
QTabWidget::pane {
border: 0 solid white;
margin: -13px -9px -13px -9px;
}
When you put QTableWidget to QTabWidget tab, you can right click on it (QTabWidget) and select Lay out -> Lay out vertically (for example, or horizontally), this will add an verticalLayout element and place your QTableWidget into it, filling the whole tab. Then, select newly created verticalLayout, scroll down to Layout section, and from here you can control layoutLeftMargin, layoutTopMargin, layoutRightMargin and layoutBottomMargin properties:
Setting all of them to 0, will give you desired result (no stylesheets involved):
Related
In Qt I set a background image for a QPushButton, then I added a tooltip for this button and the tooltip has the same background image as the button and I couldn't change it with stylesheet, what am I missing?
In my code I have:
button->setStyleSheet("background-image: url(pathToImage);");
button->setToolTip("Click here");
In my style.qss I have:
QToolTip{
background-image: none;
background-color: white;
font-size: 20px;
border: 1px solid black;
}
The font-size and the border works, but the tooltip's background-image is the same as the button's.
I also tried adding another background-image to the tooltip, it didn't worked either.
How can I change the tooltip's background?
You have to specify the QWidget where to apply the property. If you dont do so, it will apply it to all the childrens of the widget.
In your case, to avoid the background image in the tooltip you have to specify that you want to apply that style to a QPushButton widget. The documentation says:
If we want the property to apply only to the QLineEdits that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:
myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
In the example you mention, if you want to modify the style of the tooltip and the button, do something like this:
ui->pushButton->setStyleSheet(""
"QPushButton { background-image: url(me.png); }"
"QToolTip { color: #ffffff; background-color: #000000; border: 0px; }");
It will give you something like this
Update:
If you want to apply it to a single object and not the rest of the widgets of the same type, the documentation says:
If we want the property to apply only to one specific QLineEdit, we can give it a name using QObject::setObjectName() and use an ID Selector to refer to it:
myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
So in your case:
ui->pushButton->setObjectName("awesomeButton");
ui->pushButton->setStyleSheet("QPushButton#awesomeButton { background-image: url(me.png); }");
When you set qss with setStyleSheet your stylesheet applies for all children of object. In your case you can avoid this using stylesheet for QPushButton only
button->setStyleSheet("QPushButton {background-image: url(pathToImage);}");
I have a QListView to which I added line separators using the following stylesheet:
listView_->setStyleSheet("QListView::item { border-bottom: 1px solid black; padding: 2px; }");
However something unexpected has happened - on single click on any item in the list, the data vanishes from the display. It comes back on a double click. This is quite weird I think. Why is this happening ?
Here is the QListView
This is what happens as soon as I click on any item:
The data that has just vanished, comes back when I double click (instead of a single click - or selection action)
Why is this happening and how can I avoid it ?
Each item in the view has states, for example a selected state represents an item that is currently selected. Now, if you look at the list without any stylesheet attached, you will notice that selected items have dark blue background and white text. However, when you are assigning this stylesheet
QListView::item { border-bottom: 1px solid black; padding: 2px; }
you are in fact modifiing all states at once, including the selected state, which causes it to have the default white background along with the white text. For example, if you add another property:
QListView::item { border-bottom: 1px solid black; padding: 2px; background:red; }
you will notice, that all items (both selected and not selected ones) will have red background. To fix the issue, you should specify that your stylesheet must be applied only to items that are not selected
QListView::item:!selected{ border-bottom: 1px solid black; padding: 2px; }
I'm trying to customize a QTabBar button in Qt/C++ by making it show up as italic and the only way I've found is to use setTabButton and give it a custom widget, which is a QLabel in my case. However, setTabButton's position parameter only has Left or Right as options (See code below). Now it looks weird next to the other tabs which are all centered.
tab_bar->setTabButton(index, QTabBar::RightSide,((QWidget*)(tab_label)));
Note, there is a stylesheet applied to the whole application... not sure if that would cause the issue to be more apparent.
Stylesheet for that label is:
QLabel#GrainButton {
background-color: transparent;
border: 0px solid transparent;
margin: 0px;
padding: 0px;
min-width: 20px;
border: 0px solid transparent;
border-radius: 0px;
}
Any thoughts of how to center this?
You can create a custom widget instead of your QLabel. In this widget you can set a QHBoxLayout with 2 placeholders widgets.
QHBoxLayout:
PlaceHolder( sizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); )
YourLabel
PlaceHolder( sizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); )
This may place your widget in the center.
Inherit QProxyStyle and override drawItemPixmap, the pixmap will shown in the center.
QTabBar has a 1px border that separates tabs from their content.
QTabWidget::pane { border:1px solid #C4C4C3; }
I want the border to disappear under selected tab, like it's done in all browsers and most of applications using tabs.
However, setting styles for QTabBar::tab doesn't help:
QTabBar::tab:selected { border-bottom-color:white; }
So how can I achieve this?
That line is controlled by the top border of QTabWidget::pane.
For example:
QTabWidget::pane { border: 1px solid #C4C4C3; top: -1px; }
would move the line behind/under the tabs (somehow using top alone seems to remove the border completely).
I'm developing Qt application for Mac OS X.
Problem is when I create QToolButton it apears with some outline.
http://i.stack.imgur.com/vqtP9.png
I use next stylesheet
QToolButton {
border: 1px solid #575757;
border-radius: 4px;
}
How to remove the outline?
ANSWER:
I didn't mentioned that I'm adding this item to statusBar().
To remove border around the item I used:
QStatusBar::item {border: 0px;}
Have you tried this ?
QToolButton {
border: 1px solid #575757;
border-radius: 4px;
background-color: palette(base);
}
Usually, web best-practices recommand that if you change one color, you have to change them all.
It is likely that you will also have to change the text color as well to avoid potential issues on some computers with non-default window text color.
use this :
yourWidgetElement->setFocusPolicy(Qt::NoFocus ) ;