Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Adding a QTreeWidget item border
Forum Updated to NodeBB v4.3 + New Features

Adding a QTreeWidget item border

Scheduled Pinned Locked Moved Solved General and Desktop
3 Posts 2 Posters 1.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    Luca_Souto
    wrote on last edited by
    #1

    I would like to achieve an item border similar to what is found in Qt Designer:

    b6b960cf-7506-479e-bac4-0cff790e0036-image.png

    I tried the following:

    QTreeWidget {
        background: rgb(250,250,225);
        alternate-background-color: rgb(250,250,200);
    }
    
    QTreeWidget::item {
        border-bottom: 1px solid rgb(216, 216, 216);
    }
    
    QTreeWidget::item:selected {
        background: rgb(220,240,250);
        border-bottom: 1px solid rgb(216, 216, 216);
    }
    

    and:

    myTreeWidget.setAlternatingRowColors(True)
    myApplication.setStyleSheet(myStyleSheet)
    

    However, this is the result:

    75e7f3bf-fc9d-43dc-9e35-482f3c9bc262-image.png

    The problem is that the border lines do not go all the way to the left.
    Interestingly, the border on the selected item is drawn as expected.
    Any help would be greatly appreciated.

    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi and welcome to devnet,

      Unless I am mistaken, the answer lies in the branch part of the QTreeView styling example.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      L 1 Reply Last reply
      1
      • SGaistS SGaist

        Hi and welcome to devnet,

        Unless I am mistaken, the answer lies in the branch part of the QTreeView styling example.

        L Offline
        L Offline
        Luca_Souto
        wrote on last edited by Luca_Souto
        #3

        @SGaist Thank you for your help.
        I was able to achieve the desired effect by adding the following:

        QTreeView::branch{
            border-bottom: 1px solid rgb(210, 210, 210);
        }
        

        However, annoyingly, this will remove the arrows from the tree. These can be added via:

        QTreeView::branch:closed:has-children {
            border-image: none;
            image: url(C:/Users/Carlos/Desktop/branch-closed.png);
        }
        
        QTreeView::branch:open:has-children {
            border-image: none;
            image: url(C:/Users/Carlos/Desktop/branch-open.png);
        }
        

        However, ideally I wouldn't need to rely on these extra *.png files. Is there a way to include the original arrows?

        b6cacba1-6b27-452d-a6aa-73152403df05-image.png

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved