![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#31322 closed defect (bug) (fixed)
Admin bar frontend search CSS fixes
| Reported by: | afercia | Owned by: | helen |
|---|---|---|---|
| Priority: | normal | Milestone: | 4.2 |
| Component: | Toolbar | Version: | 4.1 |
| Severity: | normal | Keywords: | has-patch commit |
| Cc: | Focuses: | ui, javascript |
Description
When the admin bar is displayed on the frontend, an additional search form appears on the right. The input field doesn't have an associated label (will open a separate ticket) but there are also some CSS glitches.
- on focus: the blue lens is not shown in all browsers (appears just on hover)
- IE8: needs some love
See screenshot before the patch:
modern browsers
IE8 search collapsed
IE8 search expanded
Screenshot after the patch:
modern browsers
IE8 search expanded
Attachments (2)
Change History (14)
This ticket was mentioned in Slack in #core by drew. View the logs.
11 years ago
#4
@
11 years ago
Patch still applies. @afercia: Can you list the browsers you've tested this fix on with the patch applied?
#8
in reply to: ↑ 7
@
11 years ago
Replying to helen:
Why do we need to add that class in JS?
To correctly display the blue lens when the input field is focused.
This ticket was mentioned in Slack in #core by helen. View the logs.
11 years ago
#10
@
11 years ago
To more clearly explain what this data uri image does and fixes:
#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
/* IE8 z-index bug with transparent elements */
background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
please refer for example to http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background not sure this is still a bug in IE 9+ though, as reported on StackOverflow.
See also the screenshot below: IE 8 without the GIF and with the GIF
removes an !important used while debugging