Hi,

I'm using Firefox 16.0.2 for Ubuntu and Chromium 18.0.1025.151 (Developer Build 130497 Linux) Ubuntu 11.04 and in both the magnifying glass icon is misplaced in the search box.

I have attached screen shots of each.

Cheers

Tom

CommentFileSizeAuthor
#5 commons-search-magnifying-glass-position-safari-1879072-5.patch583 bytesblacklabel_tom
#4 Firefox-select-field.png20.35 KBautolyst
#4 new-Safari-search-field.png22.62 KBautolyst
#4 Firefox-search-field.png25.8 KBautolyst
#4 Safari-select-field.png15.56 KBautolyst
#4 Safari-search-field.png14.55 KBautolyst
chrome.jpg4.55 KBblacklabel_tom
firefox.jpg6.1 KBblacklabel_tom

Comments

blacklabel_tom’s picture

blacklabel_tom commented

Hi,

Should also say this is the commons origins theme. It looks like the link for the site/user dropdown is too wide and is pushing the magnifying glass off the edge.

I'll have a go at getting a patch up today.

Cheers

Tom

ezra-g’s picture

ezra-g commented
Component: User interface » Theme

Moving to the Theme component.

blacklabel_tom’s picture

blacklabel_tom commented

Just a quick update, this looks to be caused by the Javascript that creates the site/user drop down.

It looks like its giving the drop down too much width and it is worse in Chrome. This is site wide as the activity stream on Chrome has large gaps after each drop down for following, etc.

Cheers

Tom

autolyst’s picture

autolyst commented
Version: 7.x-3.0-beta1 » 7.x-3.0-beta2
Status: Active » Needs review
StatusFileSize
new Safari-search-field.png14.55 KB
new Safari-select-field.png15.56 KB
new Firefox-search-field.png25.8 KB
new new-Safari-search-field.png22.62 KB
new Firefox-select-field.png20.35 KB

Just an update on this one

On the latest Commons Beta 2 this issue looks to be mostly resolved. I no longer see the search field or the select field pushing around the magnifying glass, however Safari is still being victimized by the theme. I have attached screens for Safari and Firefox. I did find a quick fix to the CSS that corrected this for me, it is a line that based on my code inspector is currently ignored in Firefox and Chrome but does push things around a bit in Safari.

In profiles>commons>themes>contrib>commons_origins>css>global.base.css Line 405
You can change:

/* Dropdown control */
/* line 2, ../sass/_selectBox.scss */
.selectBox-dropdown {
  min-width: 125px;
  position: relative;

to 

/* Dropdown control */
/* line 2, ../sass/_selectBox.scss */
.selectBox-dropdown {
  min-width: 60px;
  position: relative;

This corrected it for me and the line has no affect on both Firefox and Chrome but shows some love to Safari.
See the 5th screen shot after the change.

I hope this minor correction helps on this, or closes the issue. I don't know anyone with a Windows based machine, so I have no way of testing IE so for all I know this change initiated a Zombie apocalypse for that browser. (proceed with caution)

blacklabel_tom’s picture

blacklabel_tom commented
StatusFileSize
new commons-search-magnifying-glass-position-safari-1879072-5.patch583 bytes

I've rolled this change into a patch and will test in IE when I get a chance

ezra-g’s picture

ezra-g commented
Status: Needs review » Closed (duplicate)

Thanks for the patch! Marking as a duplicate of #1917980: Magnifying glass icon out of line.