I am using a stlyesheet to style my qt pushbutton when the mouse moves over it. However, the hover event only fires when I CLICK on the button, nothing happens when I hover my mouse over it
Trackbox { background: #FFFFFF;}
QPushButton {
position: fixed;
top: 2px;
right: 2px;
width: 20px;
height: 20px;
}
QPushButton:hover { background: #c0ffff}
Any help is appreciated. Thanks
This was a very simple fix. I needed to add a boarder, o px, for hover to work correctly. Thanks for all the help.
Related
auto bar = ui->verticalScrollBar();
bar->setStyleSheet("QScrollBar:vertical { width: 20px; }"
"QScrollBar::up-arrow:vertical, QScrollbar::down-arrow:vertical { width: 15px; height: 15px; }");
I cannot resize the arrows. scrollbar
Already checked stylesheet example here http://doc.qt.io/qt-5.6/stylesheet-examples.html
Any idea would be appreciated.
Try to use min-width, max-width (the same value), min-height, max-height (the same value) instead of width and height.
Have some problem with corner widget due using non-standard font size in app, screenshot to be clear:
code:
QToolButton* m_exit = new QToolButton(m_tab);
m_exit->setIcon(QIcon(":/Resources/exit.png"));
m_exit->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
m_tab->setCornerWidget(m_exit, Qt::TopRightCorner);
font changing via
QApplication::setFont(...);
How can i do corner button same size as tab-buttons size?
P.S. using setStyleSheet( "QTabBar::tab { min-height: 120px; }" ); not allowed
You can use the ::right-corner sub-control in your stylesheet. There you can set the height of the corner button (you'd probably have to adjust the bottom too). Set both heights (corner button and tab) to the same value.
QTabWidget::right-corner {
height: 30px;
bottom: 10px;
}
QTabBar::tab {
height: 30px;
}
How can i get the appearance of QDateEdit as shown on the image?
I tried changing the stylesheet, but I dont know how to achieve the spacing between the button and the edit, nor how can I change the down arrow button.
It comes close to the image you've posted:
QDateEdit
{
background-color: white;
border-style: solid;
border-width: 4px;
border-color: rgb(100,100,100);
spacing: 5px;
}
QDateEdit::drop-down {
image: url(:/new/myapp/cbarrowdn.png);
width:50px;
height:15px;
subcontrol-position: right top;
subcontrol-origin:margin;
background-color: white;
border-style: solid;
border-width: 4px;
border-color: rgb(100,100,100);
spacing: 5px;
}
Maybe the key-word here is "sub-control". The arrows of the DateEdit or Combo-Box or anything else, don't apply all the style definitions defined in parent-control. You have to find out, how to address these sub-controls for each Qt-Class and customize the styles for each.
I hope these links will be helpful:
http://doc.qt.io/qt-4.8/stylesheet-customizing.html
http://doc.qt.io/qt-4.8/stylesheet-examples.html
I used QSS to style a QPushButton. I wanted to use two images to be set as the background-image. One for normal state & one when the button is pressed. But image shows with a border around it.
My code:
QPushButton{
background-image: url();
border-image: url(images/back/up.png);
color:rgb(255,255,255);
border-width: 2px;
border-radius: 22px;
}
QPushButton::pressed {
border-image:url(images/back/up1.png);
border-width: 2px;
background-image: url();
color:rgb(255,255,255);
}
Try following style snippet. You only need to change the background-image during the :pressed state.
QPushButton{
background-image: url(images/back/up.png);
color:rgb(255,255,255);
border-width: 2px;
border-radius: 22px;
}
QPushButton::pressed {
background-image:url(images/back/up1.png);
}
I am trying to position the bullets to the top right corner of the image but when I do and resize the screen the bullets move position.
Here is my code
.orbit-bullets
{
margin: 0 auto 30px auto;
overflow: hidden;
position: absolute;
float:right;
bottom:500px;
}
The bottom:500px can be dangerous depending on where you will put Orbit. What I'm saying there is that bullets might not be visible because they are way past the page. That could be the same reason why they are moving. You should have this instead:
.orbit-bullets {
position: absolute;
right: 25px;
top: 5px;
}
If you are not providing Foundation your own class for the orbit, it's best that you override only those three styles.
Maybe will help to anybody else having the same problem. This solution worked for me..
$(function(){
var bullets = $('ol.orbit-bullets');
bullets.insertBefore($(".orbit-container"));
});
And if you want to align to the right:
.orbit-bullets { text-align: right; }
Apply it on this element, and don't use float…
.orbit-bullets-container {
position: absolute;
right: 25px;
top: 5px;
}