How to make QToolButton go beyond the edge of QToolbar?

Question

How can I make the button go beyond the edge of QToolbar?

Below is the code as I create the toolbar:

mainwindow.h

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = 0)

private:
    QToolBar* _toolBar;
};

mainwindow.cpp

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
   _toolBar = new QToolBar;
   QAction *actionAdd = new QAction(QIcon(":/images/add.png"), "", this);
   _toolBar->addAction(actionAdd);

    addToolBar(Qt::ToolBarArea::TopToolBarArea, _toolBar);

}

style.qss

QToolBar {
    background: #018ac4;
    height: 150px;

}

It would be helpful if you post some code about how you are doing the things. — Bobur, Feb 21 '18 at 06:45
Most probably it is something about styling. I could not make this appear in my project using given a code. Do you have this project in github or other? If you want I can take a look at. — Bobur, Feb 21 '18 at 07:53
I don't think you can compose your tool bar in that way, i.e. draw child widget beyond the borders of its parent. The only way is making the button independent and overlay it on the tool bar. — vahancho, Feb 21 '18 at 08:07
[qtitanribbon](http://www.devmachines.com/qtitanribbon-overview.html) should be a good reference for make a professional appreance — saeed, Feb 21 '18 at 08:23
@Bobur. It is just simple application (https://github.com/enshirokov/toolbar) — e.n.shirokov, Feb 21 '18 at 08:55
I tried your code and didn't see anything like your picture. Everything is just as expected. I don't know how you got that window. — Bobur, Feb 21 '18 at 09:14
@Bobur I drew a picture in the editor. I want to make a custom toolbar that it looks like in the picture. — e.n.shirokov, Feb 21 '18 at 09:35
Possible duplicate of [QWidget Overflow](https://stackoverflow.com/questions/48301819/qwidget-overflow) — Mohammad Kanan, Feb 21 '18 at 20:30
Could you please mention the Qt version, because the code works well at Qt 5.3.1 — JustWe, Feb 22 '18 at 08:23

ymoreau · Answer 1 · 2018-02-21T08:27:03.507

It is not possible with widgets. A QWidget can not paint outside of its area. See this answer : https://stackoverflow.com/a/48302076/6165833.

However, the QToolBar is not really the parent of the QAction because addAction(QAction *action) does not take the ownership. So maybe the QMainWindow could paint your QAction the way you want but AFAIK this is not doable through the public API of Qt.

What you could do is use QML (but you would need to use QML for the whole window then).

score 2 · Accepted Answer · answered Feb 22 '18 at 07:40

As said before, it is not possible to solve this correctly using QtWidgets. However I see two options to visually create that effect:

Take the button out of the tool bar and add it to the main window instead, but do not add it to a layout. Usually i would say reposition it on resize events, but since it is in the top left, you might as well just call setGeometry() once on startup and not worry about it later. You probably have to add last, or call rise() though.
Make it look like the button sticks out, while it really doesn't. Make the toolbar as large as the button, but paint the lower part of the toolbar in the brighter blue, so that it looks like it is part of the widget below it.

How to make QToolButton go beyond the edge of QToolbar?

2 Answers2