Put button and icon inside QLineEdit



  • I need to put an SVG icon on the left and button on the right inside QLineEdit to get something like this

    custom line edit

    I sucessfully managed to add QToolButton on the right with following code

    class MyLineEdit(QLineEdit):
        def __init__(self, parent=None):
            QLineEdit.__init__(self, parent)
    
            self.setPlaceholderText(self.tr('Password'))
            self.setEchoMode(QLineEdit.Password)
    
            self.btnToggle = QToolButton(self)
            self.btnToggle.setIcon(QIcon('toggle.svg'))
            self.btnToggle.setCursor(Qt.ArrowCursor)
            self.btnToggle.setStyleSheet('QToolButton { border: none; padding: 0px; }')
    
            frameWidth = self.style().pixelMetric(QStyle.PM_DefaultFrameWidth)
            self.setStyleSheet('QLineEdit {{ padding-right: {}px; }} '.format(self.btnToggle.sizeHint().width() + frameWidth + 1))
            msz = self.minimumSizeHint()
            self.setMinimumSize(max(msz.width(), self.btnToggle.sizeHint().height() + frameWidth * 2 + 2),
                                max(msz.height(), self.btnToggle.sizeHint().height() + frameWidth * 2 + 2))
    
        def resizeEvent(self, event):
            sz = self.btnToggle.sizeHint()
            frameWidth = self.style().pixelMetric(QStyle.PM_DefaultFrameWidth)
            self.btnToggle.move(self.rect().right() - frameWidth - sz.width(),
                               (self.rect().bottom() + 1 - sz.height())/2)
    

    But can't figure out how to add svg image (using QSvgWidget as display) in the right. Any ideas how to do this?




  • Moderators

    @voltron
    simply put the QSvgWidget and the line edit widget into a QHBoxLayout and set the content-margins and spacing to 0.
    Then put this layout into a plain container widget.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.