In a Vaadin 14 application I wanted to exchange this standard icon at a combobox:
for another icon (and achieved the goal, but I think that my way is not the best / nicest).
My full use case is assembling a list, some buttons and a combobox to create this sortable multi-select-list:
The user can add a new value to the list by selecting the new value in the combobox below.
To exchange the standard icon for the combobox (--lumo-icons-dropdown = \ea18, an arrow showing down) for a plus-icon, I used this code: combobox.getElement().getStyle().set("--lumo-icons-dropdown", "\"\\ea23\""); (yes, all the quotes and backslashes are as shown)
This works fine (as you can see in the screenshot), but it feels incorrect to overwrite an icon.
Is there another (better) way to exchange the standard dropdown icon at a Vaadin combobox for another icon?
Related
I'm upgraded to Vaadin 23.3 Preview because of Tooltip component. Works and looks great. Only one question - I use the tooltip as a toggletip. I added an icon to my textfield and manually open tooltip by clicking it. In order to close the tooltip, I have to click the icon one more time. Is it possible somehow to close the tooltip by clicking the tooltip text also?
That's not supported, as the Tooltip feature is not intended to be used for anything interactive. As the docs say:
Tooltips only support plain text content. They aren’t focusable and
can’t contain interactive elements.
Due to technical (and especially accessibility) reasons, interactive popups like that need a different implementation. There are some vague plans to add such a feature to the Vaadin platform in the future, however.
One component in the Vaadin's Directory that can be considered better suited for the task is Popup.
JSF has autocomplete functionality with enablemanualInput but whenever I try to input a new value which is not present in the dropdown list it turns red and dropdown keeps open to show that no such entry is available. I want to replicate combobox functionality currently present in html/JQUERY UI. Is there any way to do so.
I have a large project on Vaadin, it works fine on Vaadin 7. But i have start to upgrade it to 8.0 and then to 8.1 versions. Everything is fine but focusing on ComboBoxes inside Grid. It sometimes works, but sometimes not. I look at debug console online and see that there is command to set focus received. But it not always really set focus on right component. On Chrome focus can lost from all components, in Firefox focus stays on previously focused component.
I have created simple testing Servlet with Grid component, which has some ComboBoxes as columns. It must imitate problem from large project's Servlet.
On each ComboBox added valueChangeListener, which moves focus to next ComboBox. At the last ComboBox there is moving focus on next line first ComboBox. And so on, until to last line, where it move focus on first line first ComboBox.
In test Servlet i cannot find error, all works like i want. Almost two weeks i tried to solve my problem, but cannot.
Update 2017-10-18:
I think i found my problem. There is an focus lost occured if line with focused component moves to another position.
I attach simple example. It is an Vaadin Servlet with 2-columns Grid. For focus testing i added static trigger with button. Open servlet in two browsers, select some values in ComboBoxes and play with buttons. On press button in first page it must react on second page and mix two lines. Periodically check focus on second page. On some button press line with focused ComboBox will move to another place and lost focus.
Link to example source on Vaadin forum
Link to example source on Dropbox
I want to achieve a selection box in the drop down window.(I'm using something like
<%= f.select(:season, options_for_select(['spring/fall', 'winter', 'summer'], 'spring/fall'))%>
for the selection box for now)
In this window, I want to have many icons. The user can select one of these icons. And the selected icon will be saved in the database as one attribute of the object.
Can I do this without JavaScript?
Yes it is possible to use the background-image property to set icons in a dropdown, but apparently it only works in Firefox
See this question for discussions of how to do it with JS putting images with options in a dropdown list
Windows Explorer has some behaviors that I would like to replicate in a themed application for a Delphi TListView.
(This works fine if I don't have themes for the list view, but I'd rather have themes if at all possible)
In Windows Explorer, when I click in the white space around an icon I can still make a dragover box and when I right click I get the popup menu for the container, not the icon.
With themes on, the selection grows to the entire bounding box of the item in the list, with themes off it shrinks to fit the size of the text in the list item.
What do I need to do to have themes:
But keep them working like no themes?
and work like Windows Explorer (allowing drag when selecting part of the row that is highlighted)
I suggest you to use VirtualTreeView instead. It is a powerful component with a huge possibilities, so you can do what you want event if the themes are not available