QTableWidget issue with text overlap in editable text box

notalocal

I am currently having an issue in Qt 5.7 where a text edit box in my QTableWidget leaves old text in the box as new text is being entered. So for example if I am typing into a box where the previous value was "9999", I will see my new values entered on top of the old "9999" value.

From what little I can find on people having similar issues, I think it has to do with using transparency in the QSS style sheet for my table widget, but I can't remove the transparency as it is needed for the UI design. My current style sheet is set as:

this->setStyleSheet("QWidget{background-color: transparent; color: #ffffff;}"
"QTableWidget{alternate-background-color: #70505050;background-color:transparent;gridline-color: #7f7f7f;}"
"QTableWidget::item{selection-color: #ffffff; selection-background-color: #0010cf;}"
"QLineEdit#nameEdit{color: black; background-color: white;}"
"QHeaderView::section{ background-color: #7f003464; padding: 4px; border-style: none; border-bottom: 1px solid #7fffffff; border-right: 1px solid #7fffffff;border-left: 1px solid #7fffffff;}"
"QHeaderView::section:horizontal{border-top: 1px solid #7fffffff;}"
"QHeaderView::section:vertical{border-left: 1px solid #7fffffff;}");

I have been banging my head on a wall for a couple hours now, so if anyone has any pointers on how I can fix this issue or help me find a workaround that would be greatly appreciated.

notalocal

Thanks for the help everyone! I was able to fix my issue by removing the QWidget portion of my style sheet. Now when I edit text it shows a white text edit box instead of giving the overlap. Here is my working style sheet solution.

this->setStyleSheet("QTableWidget{alternate-background-color: #70505050; color: white; background-color:transparent;gridline-color: #7f7f7f;}"
                            "QTableWidget::item{selection-color: #ffffff; selection-background-color: #0010cf;}"
                            "QHeaderView::section{ background-color: #99A3A4; padding: 4px; border-style: none; border-bottom: 1px solid #7fffffff; border-right: 1px solid #7fffffff;border-left: 1px solid #7fffffff;}"
                            "QHeaderView::section:horizontal{border-top: 1px solid #7fffffff;}"
                            "QHeaderView::section:vertical{border-left: 1px solid #7fffffff;}");

notalocal

Also note that the QTableWidgetItem that I assign to the QTableWidget spaces where an editable text box is needed has no style sheet of its own.

SGaist

Hi and welcome to devnet,

Do you really need to have all your widgets to have a transparent background ?

notalocal

I mean if I had a choice I would probably make the UI not require a transparent table over a background image, but those aren't the specifications for this element (I don't really have any say in it). Do you ask because you see it as impossible to workaround this issue?

mrjj

Hi
I do wonder if you tried to disable the stylesheets to check if issue comes from it.

notalocal

Disabling the style sheet does in fact remove my issue of overlap, but then creates the new issue of no longer having the transparent table. I know this seems like one of those "Doctor it hurts when I move my leg like this situations", but ideally I would like to figure out how to make both things work.

SGaist

That because your style sheet first line is QWidget{background-color: transparent; color: #ffffff;} which means the transparency will be applied to all widgets that are children of your QTableWidget which the editors will be.

notalocal

That actually makes sense... I would think that the alternate color style sheet would at least override that one, but I guess the QWidget sheet takes precedence. I'm going to try moving the transparent coloring to the table color sheet to see if that fixes my issue.

notalocal

Thanks for the help everyone! I was able to fix my issue by removing the QWidget portion of my style sheet. Now when I edit text it shows a white text edit box instead of giving the overlap. Here is my working style sheet solution.

this->setStyleSheet("QTableWidget{alternate-background-color: #70505050; color: white; background-color:transparent;gridline-color: #7f7f7f;}"
                            "QTableWidget::item{selection-color: #ffffff; selection-background-color: #0010cf;}"
                            "QHeaderView::section{ background-color: #99A3A4; padding: 4px; border-style: none; border-bottom: 1px solid #7fffffff; border-right: 1px solid #7fffffff;border-left: 1px solid #7fffffff;}"
                            "QHeaderView::section:horizontal{border-top: 1px solid #7fffffff;}"
                            "QHeaderView::section:vertical{border-left: 1px solid #7fffffff;}");