In the smiley drop-down menu above the content submission forms, smileys with a large width sometimes overlap with the smiley to the right of the offending one. The width it takes to get this effect varies, but it doesn't ever happen on normal 15x15px smileys. I have no idea what the problem could be because of this phenomenon.

The issue isn't stopping anyone from using the smileys or the Smiley module, but it's aggravating on the users' part so it'd be nice to fix this bug. Thanks.

The attached file is a screenshot of my smileys box for reference.

While I'm at it, a question: what's the best way to get only a specific few smileys to display in the drop-down menu, while all of them appear in the pop-up menu?

CommentFileSizeAuthor
smileys.jpg37.95 KBicecreamyou
smileys.jpg37.95 KBicecreamyou

Comments

Gurpartap Singh’s picture

Gurpartap Singh commented
Assigned: Unassigned » Gurpartap Singh
Category: bug » support
Status: Active » Fixed

You need to increase margin for .smiley-class {...} class in smileys.css to fix that. Not really a bug report, but rather a customization for own needs.

icecreamyou’s picture

icecreamyou commented

Ah, okay. I actually don't need that fix any longer now that I can choose which smileys go in the drop-down menu. :D

Anonymous’s picture

Anonymous (not verified) commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

hokuspokus’s picture

hokuspokus commented

If you use FireFox, you can use the Firebug add-on to inspect the smiley icons code in the CSS file (smiley css) included in smiley module folder. It's handy because you can make alterations to the code in the Firebug inspect window and see the position changes in real time, then when you have it how you like it, go to the real CSS file and make the changes permanent by using the settings you found using Firebug.

I had the same overlap problem, so I launched Firebug, highlighted one of the icons and then played with the "width" property in the:

.smileys span {smileys.css (line 14)
float:left;
height:47px;
text-align:center;
width:14px; <---highlight the px number in Firebug and use the arrow keys to increase/decrease and see live
preview on the page (doesn't actually change number permanently until you change CSS
file)
}

Easy Peasy