It looks like people have taken a deep liking to having line edits with a clear button. Like the one Aaron made. Since many seem to have missed that post, here’s my take on a QLineEdit with a clear button.
The code is fairly trivial. So, I won’t bother explaining. The clear button appears only when the line edit has text. Here’s how it looks,
Line edit with no text,
Line edit with some text (clear button appears)
Line edit with lotsa text (text doesn’t go underneath clear button)
Update: I got a question asking how to implement the search line edit with a menu, like in thunderbird. The clear button is a QToolButton. Just set a menu 
To move it to the left, just use padding-left and move the clear button appropriately.
Possibly related posts:
13 comments
Just curious if that clear button is configurable. That button is a “close” button, and may be confusing or intimidating (“..is that gonna close my text box?!”).
Excellent. I think I can make a Mac OS X search field-like line edit using this technique. I was never happy with the CSS method. Thanks!
Does it have a threshold for making it really activate (like close buttons on tabs have)? Otherwise I think I accidentally will press that button whenever I want to select some text.
Terrific! I was searching for something like that!
CSS integration in Qt4 widgets is really great \o/
Nice, but I’m seriously concerned about accidental clicks on that button, especially once the text reaches it (say, you mean to select and later replace something from the end of the string). — it is pretty much my problem with the close buttons inside tabs that seem to be the newest fad in both Firefox, and also (especially as hover-activated) in KDE’s several applications (Konqueror, Kate). I can’t count the amount of times I accidentally closed something instead of just selecting it.
Okay, I just realised Bram is touching this issue as well: Bram, is that threshold a KDE4 thing? I surely never saw any in KDE3
I also think that Aaron’s use of the “backspace” icon is probably a better choice than to have a generic X button
Steven Fisher: You are going to be disappointed to learn that I achieved this using Style Sheets. If you don’t like this, the only way to do it is by creating a custom QStyle and implementing SE_LineEditContents and requires some trickery to make the line edit have native borders.
Bram, Henrik: Valid point that the user might accidently click the clear button. As Bram suggested, we can add a threshold. Or we can have additional padding on the right. Or we can move out the clear button _outside_ the line edit. Here try this (instead of padding-right in lineedit.cpp),
setStyleSheet(QString(“QLineEdit { margin-right: %1px; } “).arg(clearButton->sizeHint().width() + frameWidth + 1));
Of course, you will probably need to toggle the clear button’s enable state instead of visibility. In any case, the point of the example was to help people get started with something like that since I hear this request time and again. Feel free to send me patches for your ideas
Henrik: I dislike the X button too. Its what “locate close*png” found
While you are at it:
What I would like even more are some indicators that there is text hidden outside the displayed one, perhaps by using some arrows, shadows, greying out, or something else. Clicking the arrows would scroll the text a little. I miss this not only with the lineedit, but all other widgets where content might be outside of the “viewport”. Scrollbars are only second best to help. E.g. with the lineedit they would be overkill.
Now if only there was an easy way to make the line edit have rounded corners to provide a truly native search box look and feel.
Please no timeout or other magic behavior, a simple ALT-Z undoes the accidental clear.
Harald, maybe add an “Undo clear” button instead of clear button once the lineedit is cleared?
Girish:
What, that is the best you found?
Have a look at the standard unix desktop icon set Tango:
Hmm- your comment didnt like img-tags.
http://tango.freedesktop.org/static/cvs/tango-icon-theme/22×22/actions/edit-clear.png
Comments on this entry are closed.