I'm making a GUI for a client and I'm using Qt for Python 3.6 (PySide2, not PyQt). I have a QTableWidget that reads a bunch of data, which makes the scrollbar appear. My client wants a custom GUI style, so I've been using Qt's setStyleSheet() functions.
I've run into an issue where setting the style on the scrollbar to remove the arrow buttons resizes the handle (as you'd expect) and allows it to move over the area where the arrow buttons used to be. However, if my mouse is in those areas, I can't click on the scrollbar.
The green circles are where the arrow buttons would typically be, the red bar is my scrollbar handle. If my mouse is in the green circles, I can't click on the scrollbar's handle. This becomes a big problem if the scrollbar would become smaller than the button sizes, meaning I'd have to use the scroll wheel to get it out of the area before being able to click on it. While I can fix that issue by giving the handle a minimum height/width, it's also a pretty bad user experience when you can't click certain areas of the scrollbar...
Here is my style sheet:
* {
color:white;
}
QWidget {
background-color:#333;
}
QGroupBox, QGroupBox QLabel {
background-color:#4c4c4c;
}
QLineEdit {
background-color:white;
color:black;
}
QComboBox, QPushButton {
background-color:maroon;
}
QToolTip {
border:3px solid maroon;
padding:5px;
font-size:16px;
background-color:#333;
}
QTableWidget {
color:black;
background-color:white;
alternate-background-color:#ffd6d6;
gridline-color:#4c4c4c;
selection-background-color:maroon;
}
QHeaderView::section {
padding:3px;
text-align:center;
}
QScrollBar::handle {
background-color:maroon;
border-radius:6px;
border: 2px solid #d10000;
min-width:25px;
min-height:25px;
}
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal,
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
border: none;
background: none;
color: none;
}
QScrollBar::add-line, QScrollBar::sub-line {
border:none;
background-color:none;
}
I'm pretty new to using Qt style sheets, so I'm wondering if I'm not missing something. Most answers I've managed to find only say to do what I've already done in the 3 last styles. Does anyone know what the issue might be?
After putting it aside for about a week, I've finally had to sit down and fix this issue.
For those with the same problem who're also scratching their heads at the answer to this question: Hide QScrollBar arrows, I've found a pretty obvious fix, now that I think about it.
While the following style sheet does in fact hide the arrow buttons, it does not remove them. Which is obvious in practice, since with further testing, clicking the areas still moved the handle as if I were clicking on the arrow buttons.
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal,
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
border: none;
background: none;
color: none;
}
QScrollBar::add-line, QScrollBar::sub-line {
border:none;
background-color:none;
}
The solution is pretty simple: The arrow buttons don't appear to share a style with the rest of the scrollbar (since the scrollbar is separated into sub-styles). This means doing something like setting the width and height properties of the arrow buttons to 0px will make it so you can click on the handle.
note: For good measure, I've also set the add-line and sub-line properties to 0px.
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal,
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
border: none;
background: none;
color: none;
width: 0px;
height: 0px;
}
QScrollBar::add-line, QScrollBar::sub-line {
border:none;
background-color:none;
width: 0px;
height: 0px;
}
Related
I want the QCombobox to have a round shape similar to the picture above.
I made it somewhat similar.
But when I click the QComboBox to check the list, the round shape is not created.
The border is round, but the background doesn't seem to be the case.
QComboBox:editable {
background-color : red;
}
QComboBox QAbstractItemView {
border : 2px solid blue;
border-radius: 6px;
}
This is the 3rd photo style sheet. I wrote it for testing.
comboBox_name.view().window().setWindowFlags(Qt.Popup | Qt.FramelessWindowHint)
comboBox_name.view().window().setAttribute(Qt.WA_TranslucentBackground)
I'm trying to style a Dash date picker and am having trouble identifying the appropriate classes.
So far I have
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
background: gold;
border: 1px double black;
color: #fff
}
.CalendarDay__selected_span {
background: #a17f1a;
border: 1px double #black;
color: #fff
}
which modifies what I think are the default plotly classes.
However there are lots of hover, border, active, etc. properties which aren't affected by these, so the default blueish color remains.
Does anyone know how to change the overall color scheme with minimal css please? Or perhaps by some property on the dcc.DatePickerRange component itself?
Using python and QT. I would like ask you if there is a way to have QLabel aligned as central/middle
Usually I use:
self.label.move(0,100)
but I wonder is there any easier way
If what you want is to set something in the middle of the screen, then you can set a layout and put that QLabelinside. Once you have it, you will be able to set it where you want.
If you want to do it with a styleSheet then you can use something like
.center {
margin: auto;
width: 60%;
padding: 10px;
}
I am writing a GTK3 app in python and want to dynamically change the background color of an Entry based on certain other conditions in the application. All the documentation I've found seems to agree that CSS is the best way to do this, but that seems both too much overhead, and more permanent than I want.
I have tried override_background_color(), but this changes the highlight color rather than the empty space within the Entry field.
Is there a simple way to change the color around dynamically?
I think you should prepare a css provider with as any many as tags as needed like:
#cond1 {
background-image: none;
background-color: .... ;
}
#cond2 {
background-image: none;
background-color: .... ;
}
#cond3 {
background-image: none;
background-color: .... ;
}
Then inside your code, each time you need a color matching your conditions, you just assign a name to your widget like:
widget.set_name("cond1")
And so on.
Regards
I want to hide the Small Down Arrow that appears on the QToolButton if i set a QMenu to it.
I have tried using StyleSheet by setting QToolButton menu-arrow image to none. The following is my Qss code:
QToolButton
{
border:1px solid #B6C4DB;
border-radius:12px;
padding:2px;
margin-left:5px;
}
QToolButton::menu-arrow
{
image:none;
}
QToolButton:pressed
{
border:1px solid #D6BB0B;
}
Is there a way to hide that small arrow on QToolButton with a menu?
QToolButton::menu-indicator { image: none; }
posting my comment as a potential answer (at least for now):
Looks like this is a bug but this page lists a workaround