How to change background colour of vaadin 8 combobox's dropdown items? - css

I am working with vaadin 8, and I have a com.vaadin.ui.ComboBox called "contacts" which is filled with a number of string-items. Whenever I click into the combobox, the items are displayed as a dropdown after I hit the space bar. The background against which the dropdown is displayed is transparent, and I would like to dye it blue. The F12-tools seem to be of no avail to find out which class I have to style. So what can I do to change the background-color of the pane on which the dropdown items are displayed?

Use the class .gwt-MenuItem for the dropdown entries. See https://vaadin.com/docs/v8/framework/components/components-combobox/#components.combobox.css

Related

Change the position of blue highlight on select box dropdown

I was trying to change the highlight/focus (not sure which it actually refers) background position color when user moves the mouse over the select drop-down list. The blue background box is coming a little below the text. I want to move its position a little bit. What type of css property it needs to add. Any idea?
give padding top to every list item of dropdown menu, a

Flex Spark Combobox displaying icon into the main combobox area?

I wish to display icon into the spark combobox main area.
I can display icons inside the elements list, but the icon doesnt appear into the main area.
How to do that ?
You could always add your own skin to add an icon depending on the currently selected item in your list.

my asp:menu control is hidden when it contains no items - how can I show it?

I added an asp:menu control (with a web.sitemap backend) to my app. For this particular app, when the user is not logged in, I don't want to show any menu items, but I do want the menu to have the same color as the bitmap header under it. However, when the menu is empty, I just end up with a blank rectangle. It's a static menu, 5 items, using CSS to style it. I've tried adding the background color to the menu, the staticmenu style, and the staticmenuitem style with no luck. Any ideas?
Why not wrap the menu control in a div to create a container that will always exist regardless and give it a background color?

Removing default onclick or onItemClick color animation

When I click on some button or I click on the a element in grid or list view, a default orange color appears. I don't want that color to come when I click on it. Please tell me how can I do this.
And also is it possible to change the orange color by some other custom color when i click on button or items in grid or list view.
There is an example of how to set this here:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1c9e319c-79aa-4608-a302-0a6c9d93d504

Creating same-width hit-zones on MenuItems in ASP.NET 2.0 Menus that include MenuItems added at runtime

In an ASP.NET 2.0 application, I want to permit a user to select a MenuItem, even if the user does not click the actual text of the MenuItem, but instead only clicks the highlight area that ASP.NET places around the currently selected MenuItem (represented by the DynamicHoverStyle.BackColor property). Since the BackColor is displayed the same width for each MenuItem in a submenu, based on MenuItem with the longest text, I would like to make the hit-zone (clickable area) of each sub-MenuItem the same width (same at the BackColor area), regardless of how much text is displayed in the in each individual sub-MenuItem.
Here's the setup. I am using a Menu on a MasterPage to display a similar menu on each of my pages. Some of the pages suppress this menu, and some of them add addition MenuItems, sometimes to the top level, sometimes adding sub-MenuItems to an existing top-level MenuItem, and sometimes both (adding a MenuItem to the top level and then additional MenuItems as submenuitems to that newly added top level.
This menu has a horizontal orientation, and it is dynamic, in that only the top level is initially exposed, and the submenus are displayed when selected.
During usability testing, we noticed that users would select a top-level menu item to expose the submenu, and then select a submenu item, but not by necessarily clicking on the submenu item text, but instead clicking on the BackColor area of the submenu item. Since the text of some MenuItems are longer than others, MenuItems with short Text have a rather large BackColor area. When the user clicks on the BackColor area, but not directly on the MenuItem Text, nothing happens, since the user didn't actually click on the submenu item hit zone.
Although there are visual cues as to what part of the displayed MenuItem is clickable (the mouse pointer changes to a link cursor when the mouse is positioned on the MenuItem Text, but not when it is only hovering over the BackColor), this behavior confused the users. They highlighted a MenuItem, and clicked it, but nothing happened.
I would like to make clicking a MenuItem successful, even if the user did not click on the actual Text of the MenuItem, but simply click on the BackColor area.
It seems like there should be a property somewhere to control the width of the active area of the displayed MenuItems, but I do not see it. Any suggestions, given that I am creating some of these MenuItems at runtime?
Added css class:
.MenuClickArea {width: 100%; display: block;}
and assigned that class to the DynamicMenuItemStyle and StaticMenuItemStyle of the menu in question in the master page aspx
seems to do the trick.

Resources