Collapsible shows black bars

[MinmoTech]

Describe the bug The Collapsible component from superqt shows a black bar instead of the arrow and the collapsible name.

To Reproduce Code resulting in the above screenshot is hosted here: https://github.com/MinmoTech/collapsible-test It is simply the example from this repository.

Expected behavior There should be no black bars, the collapsible name and arrow should show normally. Similar to this image in the original proposal:

Desktop (please complete the following information):

• Archlinux
• Tested with PyQt5 and PySide6
• Python 3.10
• superqt version: 0.3.1

[MinmoTech]

@MosGeo Pinging you since you worked on the implementation of this :)

[MosGeo]

@minmotech At first glance, I think something went horribly wrong with the arrow character that is used. It is probably not available in the default Linux font used. I have not tested it on Linux.

Is it functioning (just a visual glitch?)

[MinmoTech]

Sorry, I should have mentioned that. I works as it's supposed to, it's just a visual glitch :)

[MosGeo]

The current implementation uses symbols for arrows. Can you display this arrow correctly in arch Linux? https://www.fileformat.info/info/unicode/char/25b2/index.htm

[MinmoTech]

It seems it is able to show the arrow by itself when used in a QLabel:

Code i used:

from qtpy.QtWidgets import QApplication, QLabel, QPushButton

from superqt import QCollapsible

app = QApplication([])

collapsible = QCollapsible("Advanced analysis")
collapsible.addWidget(QLabel("This is the inside of the collapsible frame"))
for i in range(10):
    collapsible.addWidget(QPushButton(f"Content button {i + 1}"))

arrowLable = QLabel("▲")
collapsible.addWidget(arrowLable)

collapsible.expand(animate=False)
collapsible.show()
app.exec_()

[MinmoTech]

I might have found the issue, I think it's the transparent part of the css:

        self._toggle_btn.setStyleSheet("text-align: left; background: transparent;")

With that css:

Removing the transparent part:

        self._toggle_btn.setStyleSheet("text-align: left;")

[MinmoTech]

@MosGeo I made a PR that fixes the issue, could you look at it if it works for what you had in mind for the component? :)