PyQt5 Stylesheet For QWidget's Child To Change QWidget - pyqt5

I have a QWidget with a HBoxLayout inside. Inside this HBoxLayout there is a few buttons and a QLineEdit object. Using stylesheets, I would like to make it so that when the QLineEdit is focused, the QWidget gets a blue outline/border.
I have tried:
QSearchWidgetStyleSheet = QWidget {background-color: rgb(27,27,27); border: none; margin: 0px; border-radius: 3px; padding: 0px;}
QLineEdit:focus {border: 3px solid rgb(100,100,100;}
With my QLineEdit stylesheet being:
QLineEditStyleSheet = QLineEdit {color: white; background-color: rgb(255,255,255,0); border: none; height: 32px; border-radius: 3px; margin-left: 3px; margin-right: 3px;}
However, there is no effect on the QWidget when the QLineEdit is focussed. What should I change in order for the QWidget to get the border/outline when the QLineEdit is focused?

QLineEdit:focus applies the style to the QLineEdit, not the QWidget. While child widgets can take up the style sheet of their parent widget, I don't think it works the other way around in general style sheet syntax. Instead you could describe the scenario only considering the QWidget... It should have a border when it is not in focus, and it should not have a border when it is in focus.
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
class Widget(QWidget):
def __init__(self):
super().__init__()
hbox = QHBoxLayout(self)
hbox.addWidget(QPushButton('Push'))
hbox.addWidget(QLineEdit())
self.setAttribute(Qt.WA_StyledBackground, True)
self.setStyleSheet('''
Widget {
border: 3px solid blue;
}
Widget:focus {
border: none;
}''')
def mousePressEvent(self, event):
if event.button() == Qt.LeftButton:
self.setFocus()
class Template(QWidget):
def __init__(self):
super().__init__()
grid = QGridLayout(self)
grid.addWidget(Widget(), 0, 0)
self.resize(300, 300)
if __name__ == '__main__':
app = QApplication(sys.argv)
gui = Template()
gui.show()
sys.exit(app.exec_())
Of course if you're open to using other methods, like signals and slots, you could achieve more precisely that functionality.

Related

How to individually customize QTabWidget tabs?

A MRE to customize QTabWidget tabs reads:
import sys
from PyQt5.QtWidgets import QMainWindow, QApplication, QLabel, QWidget, QAction, QTabWidget,QVBoxLayout
from PyQt5.QtCore import pyqtSlot
class App(QMainWindow):
def __init__(self):
super().__init__()
self.title = 'Tabs tailoring'
self.setWindowTitle(self.title)
self.table_widget = TailoredWidget(self)
self.setCentralWidget(self.table_widget)
self.show()
class TailoredWidget(QWidget):
def __init__(self, parent):
super(QWidget, self).__init__(parent)
self.layout = QVBoxLayout(self)
# Initialize tab screen
self.tabs = QTabWidget()
self.tabs.setStyleSheet('''QTabBar::tab {font-size: 20pt; color: #00004F; height: 40px; width: 140px;}''')
self.tab1 = QWidget()
self.tab2 = QWidget()
self.tab3 = QWidget()
# Add tabs
self.tabs.addTab(self.tab1,"TAB 1")
self.tabs.addTab(self.tab2,"TAB 2")
self.tabs.addTab(self.tab3,"TAB 3")
# Add tabs to widget
self.layout.addWidget(self.tabs)
self.setLayout(self.layout)
#pyqtSlot()
def on_click(self):
print("\n")
for currentQTableWidgetItem in self.tableWidget.selectedItems():
print(currentQTableWidgetItem.row(), currentQTableWidgetItem.column(), currentQTableWidgetItem.text())
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = App()
sys.exit(app.exec_())
This works as expected and allows to play around with the setStyleSheet parameters. However, I'd prefer to be able to customize each tab individually. I tried modifying the initialization of the tabs to:
# Initialize tab screen
self.tabs = QTabWidget()
# self.tabs.setStyleSheet('''QTabBar::tab {font-size: 30pt; color: #00004F; height: 40px; width: 140px;}''')
self.tab1 = QWidget()
self.tab1.setStyleSheet('''QTabBar::tab {font-size: 15pt; color: #55004F; height: 40px; width: 140px;}''')
self.tab2 = QWidget()
self.tab2.setStyleSheet('''QTabBar::tab {font-size: 20pt; color: #AA004F; height: 40px; width: 140px;}''')
self.tab3 = QWidget()
self.tab3.setStyleSheet('''QTabBar::tab {font-size: 25pt; color: #FF004F; height: 40px; width: 140px;}''')
but this doesn't do anything. Is there any way to assign each tab different properties?

Vuetify: How to create a triangle badge?

I understand if I use v-badge, I get a circle badge but I want a triangle badge instead like below.
Could anyone give an advice of how to make it?
Thank you.
You could use the v-badge's badge slot to insert a div with 1, and style that div
In the template, apply a class to v-badge (named "triangle"), and insert a div in the badge slot to contain the number along with a class (named "my-badge"):
<v-badge class="triangle">
<template v-slot:badge>
<div class="my-badge">1</div>
</template>
</v-badge>
Add CSS styles for the .triangle .v-badge__badge and .my-badge:
.triangle .v-badge__badge {
/* remove border radius to allow icon to fill space */
border-radius: 0;
/* use a clip-path to form a quirky triangle */
clip-path: polygon(100% 51%, 0 0, 3% 100%);
height: 30px;
width: 30px;
}
.my-badge {
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.9em;
font-size: 14px;
height: 100%;
color: #fff;
background: green;
}
demo

Which property of THEMES/CLARO.CSS inside DOJO TOOLKIT shows the text box inside the buttons DIJIT/FORM/BUTTON?

Which property of THEMES/CLARO.CSS inside DOJO TOOLKIT shows the text box inside the buttons DIJIT/FORM/BUTTON ??
I would like to remove the black box from the text and icon.
Change the "baseClass" button but it still persists.
Configure the following:
.button0 {
margin: 2px;
padding: 3px;
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
}
.button0:hover {
background-color: #ffaa22;
}
And add "button0" to "baseClass" of widget.
I found the class that had the box and was able to get it out:
.dijitButtonNode {
border: 0px;
}

Stage not resizing on orientation change

Am creating an image editor library with the support of KinetiJS.
In my html,
<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
<div>....</div>
<div>....</div>
<div id='rotateouterDiv' class='rotateouterDiv' >
<textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
</div>
<div id='imageContainer'></div>
</div>
</div>
Then creating a stage
_kineticStage = new editor._Stage({
container : 'imageContainer',
width : $('#editorarea').width(),
height : $('#editorarea').height()
});
Kinetic.Util.extend(editor._Stage, Kinetic.Stage);
And adding an image,
_kineticImage = new editor._Image({
x : 0,
image : img,
y : 0,
draggable : true,
});
layer.add(_kineticImage);
The CSS applied is,
#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;
min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}
.fill {
min-height: 85%;
height: 90%;
}
.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}
The textarea should be on the top of the image. In this case, I placed that div containing the textarea using the #media queries, for supporting different screen size and orientation.
The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of textarea is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image).
Can anyone help me to resize it properly? This should work in touch devices.
Thanks...

Webkit placeholder text jumps

I have an <input /> with a placeholder. The input is custom-designed, i. e. it has no borders, no outline, a custom height, custom width, custom background color, custom text color, and a custom font with a specific font-size and line-height. That font is imported using #font-face referencing a *.ttf-file.
The problem is that when focussing on the input field, the placeholder text jumps about 2-3px higher, only to jump back on blur.
Here the definition of the input field:
#font-face{
font-family: SourceSansProExtraLight;
src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}
#search_input{
background-color: #f0f0f0;
outline: none;
border: none;
padding: 0;
margin: 0;
width: 236px;
padding-left: 12px;
width: 224px; /* width (236) - padding-left */
font-family: SourceSansProExtraLight;
font-size: 30px;
line-height: 30px;
color: #5e5e5e;
height: 52px;
}
Here's a GIF demonstrating the issue:
Please check that you have write any css for input:focus Selector that may cause the issue. if you don't write any css for input:focus, write css for that to fix the problem.
With input[type="text"] there is no Problem.
I have the Problem only with input[type="number"] if the height and line height is equal:
input[type="number"] {
height: 30px;
line-height: 30px;
}
but if I reduce the line height the effect disapears:
input[type="number"] {
height: 30px;
line-height: 28px;
}
Chrome reserve space for caret.
The height of the line must be greater than the height of the font at 1.11 units (on my system).
Example:
font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
Try setting outline-offset: 0 when the input has :focus. That fixed the jumping placeholder bug for me on WebKit. I was also setting outline: none and showing a custom box-shadow, which may be the cause.