Skip to content
Qt 6.11 is out! See what's new in the release blog
  • 0 Votes
    4 Posts
    96 Views
    J
    I've created a very simple TreeView sample app that lets me modify the stylesheet directly within the code, but nothing i do seems to effect the size of the Arrow icons attached to the sibling with children items in the Treeview. the code... #include <QApplication> #include <QScreen> #include <QTreeView> #include <QStandardItemModel> #include <QHeaderView> int main(int argc, char *argv[]) { QApplication app(argc, argv); // 1. Create the Tree View and populate data QTreeView treeView; QStandardItemModel model(4, 2); model.setHeaderData(0, Qt::Horizontal, "Task Name"); model.setHeaderData(1, Qt::Horizontal, "Status"); // Fill dummy hierarchical data for (int i = 0; i < 3; ++i) { QStandardItem *parentItem = new QStandardItem(QString("Project Phase %1").arg(i + 1)); QStandardItem *statusItem = new QStandardItem("In Progress"); model.setItem(i, 0, parentItem); model.setItem(i, 1, statusItem); for (int j = 0; j < 2; ++j) { QStandardItem *childItem = new QStandardItem(QString("Sub-task %1.%2").arg(i + 1).arg(j + 1)); QStandardItem *childStatus = new QStandardItem("Pending"); parentItem->appendRow(QList<QStandardItem*>() << childItem << childStatus); } } treeView.setModel(&model); treeView.expandAll(); // Enable alternating backgrounds required by the stylesheet treeView.setAlternatingRowColors(true); // 2. Define and Apply the QSS Stylesheet QString treeStylesheet = R"( /* Main view styling */ QTreeView { background: #4d4d4d; selection-color: black; selection-background-color: #f9d20e; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; show-decoration-selected: 1; } QTreeView::item { height: 25px; padding-left: 7px; background-color: transparent; } QTreeView::branch:has-siblings:!adjoins-item { border: none; } QTreeView::branch:has-siblings:adjoins-item { border: none; } QTreeView::branch:!has-children:!has-siblings:adjoins-item { border: none; } QTreeView::branch:has-children:!has-siblings:closed, QTreeView::branch:closed:has-children:has-siblings { border-image: none; image: url(:/ClosedArrow.svg); width: 5px; height: 5px; } QTreeView::branch:open:has-children:!has-siblings, QTreeView::branch:open:has-children:has-siblings { border-image: none; image: url(:/OpenArrow.svg); width: 5px; height: 5px; } QTreeView QLineEdit { color: #000000; background: #ffffff } QTreeView QScrollBar:vertical { padding-left: 3px; background: black; width: 11px; margin: 0px; } )"; treeView.setStyleSheet(treeStylesheet); treeView.resize(450, 300); treeView.show(); return app.exec(); } I've been swapping out the PNG's and SVG's - each result in a different size of the triangle that get rendered, but neither SVG or PNG are effected by the icon-size or, width and height properties? How am I supposed to get matched sizes? The SVG file is near exact copy of the PNG image, why am i getting such different results? and what is the correct way to control the icon size for this specific icon / image? Regards,
  • 0 Votes
    5 Posts
    2k Views
    G
    @Abderrahmene_Rayene smart!
  • 0 Votes
    2 Posts
    1k Views
    C
    You should call QStyledItemDelegate::paint function inside yours QStyledItemDelegate derived class before painting of icons and text: void IconsRenderItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const { QStyledItemDelegate::paint(painter, options, index); // Draw somethig }
  • 0 Votes
    2 Posts
    1k Views
    C
    Hi, Please provide the following information: Qt kit you are using. Qt Creator version. OS, and if Linux, what desktop environment? I tested that stylesheet on Fedora KDE spin, using Qt 5.15.2/6.2.4/6.6.1, Qt Creator 12, and this MRE: int main(int argc, char *argv[]) { QApplication a(argc, argv); QTabWidget t; t.setStyleSheet(R"(QTabWidget::pane { border: 3px solid rgb(68, 76, 94); } /*======TAB*========*/ QTabBar::tab { /*color: rgb(68, 76, 94);*/ border: 2px solid rgb(68, 76, 94); } QTabWidget::tab-bar:top { top: 3px; } QTabWidget::tab-bar:bottom { bottom: 2px; } QTabWidget::tab-bar:left { right: 2px; } QTabWidget::tab-bar:right { left: 2px; } QTabBar::tab:left:last, QTabBar::tab:right:last, QTabBar::tab:left:only-one, QTabBar::tab:right:only-one { margin-bottom: 0px; } QTabBar::tab:first { border-top-left-radius: 10px; border-top-right-radius: 10px; } QTabBar::tab:last { border-top-left-radius: 10px; border-top-right-radius: 10px; } QTabBar::tab:middle { border-top-left-radius: 10px; border-top-right-radius: 10px; } QTabBar::tab:top, QTabBar::tab:bottom { min-width: 8ex; margin-right: -1px; padding: 5px 10px 5px 10px; } QTabBar::tab:top:last, QTabBar::tab:bottom:last, QTabBar::tab:top:only-one, QTabBar::tab:bottom:only-one { margin-right: 0; } QTabBar::tab:left, QTabBar::tab:right { min-height: 8ex; margin-bottom: -1px; padding: 10px 5px 10px 5px; } /*TAB:SELECTED*/ QTabBar::tab:selected { background: white; color: rgb(68, 76, 94); border-color: rgb(68, 76, 94); border-bottom-color: transparent; margin-top: 0; } QTabBar::tab:top:selected { border-bottom-color: none; } QTabBar::tab:bottom:selected { border-top-color: none; } QTabBar::tab:left:selected { border-left-color: none; } QTabBar::tab:right:selected { border-right-color: none; } /*TAB !SELECTED*/ QTabBar::tab:!selected { color: white; background-color: rgb(68, 76, 94); border-color: rgb(68, 76, 94); border-width: 3px; } QTabBar::tab:top:!selected { margin-top: 4px; } QTabBar::tab:bottom:!selected { margin-bottom: 3px; } QTabBar::tab:left:!selected { margin-right: 3px; } QTabBar::tab:right:!selected { margin-left: 3px; })"); t.addTab(new QWidget, "Variable fisicas"); t.addTab(new QWidget, "Variable fisiologicas"); t.addTab(new QWidget, "Unidad de Control de Agua"); t.show(); return a.exec(); } and I get this: [image: 61409c28-5d4c-4550-96f0-8aee04ef5f27.gif] Which looks normal. I also tried it on in Qt Designer, just slapped a QTabWidget on a QMainWindow and applied the stylesheet on it, and got this: [image: 715530db-bd48-40b5-82c8-e54b32875f4d.gif] I also tried to apply the stylesheet on the main window, and the QApplication just to be sure, but same result.
  • 0 Votes
    2 Posts
    1k Views
    Christian EhrlicherC
    The style always wins as written here: https://doc.qt.io/qt-6/stylesheet.html#overview "Style sheets are applied on top of the current widget style,"
  • 0 Votes
    4 Posts
    2k Views
    A
    @JonB Thats fine, at least I don't have to unpolish first. Although I still think there is a bug because you don't have to polish the QComboBox's ItemView when it is not inside a QTabWidget or QStackedWidget.
  • 0 Votes
    3 Posts
    1k Views
    S
    Well, Qt does not provide these capabilities. This means that you cannot easily use stylesheets for this purpose. However, there might be OS-specific ways to change the color of the title bar. On Windows (10 and later) you can use DwmSetWindowAttribute to enable dark mode for the title bar. Another way is to get a window without decoration/borders from the OS and then draw the entire title bar yourself using Qt. Then, you can also style the title bar using stylesheets. It might get a little complicated to draw the close and minimize buttons in the correct OS style yourself.
  • 0 Votes
    1 Posts
    771 Views
    No one has replied
  • 0 Votes
    6 Posts
    3k Views
    SGaistS
    Don't you have access to the source code ? And if not, ask the authors ?
  • QToolButton with margin is clickable

    Unsolved General and Desktop margin stylesheet
    6
    0 Votes
    6 Posts
    3k Views
    Chris KawaC
    Since it changes geometry of the items after maybe it's another quirk. Try calling QStyle::unpolish and then QStyle::polish() with the toolbar.
  • Palette overriding style sheet

    Solved General and Desktop stylesheet palette style
    8
    0 Votes
    8 Posts
    4k Views
    S
    @JonB said in Palette overriding style sheet: Any reason why you didn't use, say, static QPushButton dummyButton; here? I guess I fumbled to long to actually get the style sheet to apply. I tried many different things (because I didn't see this documented anywhere). Must have overlooked this when cleaning up. Thank you! Will fix it in my code.
  • Stylesheet css or xml widgets pyqt6 python

    Solved Qt 6 stylesheet css xml qtwidgets python
    5
    0 Votes
    5 Posts
    4k Views
    J
    @jsulm Thank you very much ! It's exactly what I needed. In the top !
  • 0 Votes
    15 Posts
    4k Views
    SGaistS
    Right ! Your part was way longer than the original conversation 😅
  • 0 Votes
    1 Posts
    902 Views
    No one has replied
  • 0 Votes
    3 Posts
    4k Views
    L
    @JonB Thank you for your feedback. Going thorugh the existing children lists and filter the widgets in specific code is surely a bit more efficient with regards to speed, but that's not the kind of optimisation I was looking for. Some frameworks have a dirty flag for instance that triggers an evalution by the graphics system when it is due for evaluation (on 20ms ticks for instance). The polish/unpolish functions could benefit from a better documentation. I have a stylesheet only at the QApplication level, I empty all other stylesheets that are set by QtDesigner - I use the only for that. I use the same "style()" because it works and it probably is a small performance gain. I haven't tried polishing the application itself, and I suppose that is an overkill for just updating a few widgets. The default implementation of (un)polish does nothing, but QStylesheetStyle does. It seems to wrap the baseStyle(), which is likely something like QWindowsStyle or QFusionStyle which do nothing. But that's doing exactly what is needed then, only the stylesheet impacts the layout and the QStylesheetStyle handles that. QWidget::ensurePolished works recursively, but polishes only "unpolished" QWidgets in the end. Upon examination of the QStylesheetStyle code, it seems that unpolishing may not be needed. So I am removing that from the "recursive" implementation and I'll see if it's ok. It seems to avoid quite a few unnecessary operations! Update: polishing "recursively" is just enough.
  • 0 Votes
    3 Posts
    8k Views
    A
    @nagesh No style sheet, however, I had experiemented with the stylesheet in the link that you sent, and I couldn't figure it out. Which fields pertain to the width of the drop-down? There is a horizontal layout, however, I have also tried without layout and I get the same issue. I can control the width of the Combobox when it is closed, but once open there is an offset, that is what I would like to remove. Thank you, Arjun
  • Replicating double borders with QSS

    Solved General and Desktop qss stylesheet
    5
    0 Votes
    5 Posts
    3k Views
    SGaistS
    You can read the class sources.
  • 0 Votes
    3 Posts
    4k Views
    dporobicD
    Yes, it was a custom widget in title bar. I wasn't able to figure out where this is coming from so I went with a different solution but still strange behavior.