#8594 closed bug (notabug)

Opened September 23, 2012 12:37PM UTC

Closed February 26, 2014 03:09PM UTC

bottom line of selected item in autocomplete dropdown is invisible if backgound image applied to <a/> element

Reported by: deng.hui5 Owned by: deng.hui5
Priority: minor Milestone: none
Component: ui.autocomplete Version: 1.9.0-rc.1
Keywords: Cc:
Blocked by: Blocking:
Description

CSS:

.ui-menu a.test{
	background: white url('/a/b/icon16.png') no-repeat;
	padding-left: 16px;
}

JS:

$(this).data( "autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li></li>" )	.data( "item.autocomplete", item ).append( "<a class=test>" + item[code] + "</a>" ).appendTo( ul );
Attachments (0)
Change History (6)

Changed September 23, 2012 05:58PM UTC by scottgonzalez comment:1

owner: → deng.hui5
status: new → pending

If you're using a custom render method, I'm not sure what you want us to do. At a minimum we need a reduced test case showing the problem.

Changed September 27, 2012 02:48PM UTC by deng.hui5 comment:2

status: pending → new

I find <a> element in dropdown menu use margin:-1px to reserve space for border of focused item. so I change it to:

.ui-menu a{
	margin:1px 0px 0px;
}
.ui-menu a.ui-state-focus{
	margin:0px;
}

seems fixing this bug.

Changed October 11, 2012 02:42PM UTC by scottgonzalez comment:3

milestone: 1.9.0 → 1.10.0

Changed October 15, 2012 04:31PM UTC by bavanyo comment:4

status: new → open

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:5

milestone: 1.10.0 → none

Changed February 26, 2014 03:09PM UTC by scottgonzalez comment:6

resolution: → notabug
status: open → closed

We no longer use anchors in the menu items, so this is purely a custom rendering issue now.