I am trying to add flag icons in a Vaadin Flow Combobox using a customer ComponentRenderer:
new ComponentRenderer<>(locale -> {
HorizontalLayout item = new HorizontalLayout();
item.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.BASELINE);
Span langIcon = new Span();
langIcon.addClassNames("flag-icon", "flag-icon-" + getTranslation("App.Language.Flag", locale));
item.add(langIcon);
item.add(new Span(locale.getDisplayLanguage(locale)));
return item;
});
The icons come from flag-icon-css (see here) included via gradle compile dependency "org.webjars.bowergithub.lipis:flag-icon-css:3.3.0" and annotation #StyleSheet("frontend://bower_components/flag-icon-css/css/flag-icon.min.css") on my main layout class. In a different place with ListBox component, icons are shown as expected. However, when used via ComponentRenderer in a combobox nothing shows up.
Inspecting the HTML, I see that the <vaadin-combo-box-item> within ComboBox renders everything under its shadow root in contrast to <vaadin-item> within ListBox which renders it as <slot>. Why is that? And how could I use the flag icon CSS styles in combo box items?
Related
For part of our UI, the main div is disabled and then more components are added based on the data loaded. However, if the main div is disabled before adding the additional components, then only some of the additional components added have the disabled attribute set.
Have tried Vaadin 23.0.10 and 23.1.0rc1 with Java 17.
Example code:
VerticalLayout vlMain = new VerticalLayout();
vlMain.setSizeFull();
HorizontalLayout hlOne = new HorizontalLayout(FontAwesome.Solid.BUG.create(), new Button("Testing"));
HorizontalLayout hlTwo = new HorizontalLayout();
hlOne.setEnabled(false);
hlTwo.setEnabled(false);
Button add = new Button("Add");
add.addClickListener(buttonClickEvent -> {
if(buttonClickEvent.isFromClient())
{
hlTwo.add(FontAwesome.Solid.BUG.create());
hlTwo.add(new Button("Testing"));
}
});
vlMain.add(hlOne, hlTwo, add);
When the above is run, hlOne contains 2 disabled controls.
Clicking the button adds the additional components, however the icon doesn't inherit the disabled attribute but the button does. Calling hlTwo.setEnabled(false) again then sets everything correctly. This can be verified using the browser inspector.
While there is the workaround, it would be good to know what the expected behaviour should be.
Thanks.
Is it possible to add a buttons in Vaadin 7 to Accordion com.vaadin.ui.TabSheet.Tab caption ?
Right now I can only add a String into Tab caption.
This is my current screen:
I need to add the same Edit/Remove icons(as I have for Live Chat and WMA) near the General and Julia Group tab captions.
Unfortunately it's not possible.
You could create a server-side composition, which behaves like Accordion but then you could design the component so that you can add buttons to tab captions. You could start with something like this:
public class MyAccordion extends CustomComponent {
public MyAccordion() {
VerticalLayout layout = new VerticalLayout();
setCompositionRoot(layout);
// TODO layout should contain all tabs and tab captions
}
}
Another option would be to create an extension by using GWT or Javascript and on the client-side modify DOM so that there a two buttons on tab captions.
I am having a problem with the jQuery multiselect plugin.
Essentially I have a partial view which renders and is hidden when the page is loaded.
Within the partial view I have the following code defined in a script section:
$(document).ready(function () {
$('#ddlCountries').multiselect().multiselectfilter();
var countries = $('#ddlCountries');
var parent = $("#ddlCountries").parent();
var span = $("#ddlCountries").parent().find("span[class='custom-select-back']");
debugger;
This code selects a dropdown list and applies the multiselect plugin - along with the filter options. Everything is fine with one exception - once the partial is displayed a span object with a class of "custom-select-back" is rendered over the top meaning I cannot use the control.
Code used in other parts of the system simply selects the parent of the dropdown and hides the span as can be seen above - Unfortunately in this case that code does not work.
If I inspect the source at the point the debugger is hit the parent of ddlCountries is the parent DIV - the span doesn't exist at this stage.
If I inspect the source after the page has finished loading, the parent is an element custom-select object which now contains the problematic span.
I need to somehow hide this span but I cannot see how or where I can do this. Does anybody have any ideas?
In the end I could not resolve this using jQuery/javascript as DOM elements simply did not exist at the the point the code executed.
I instead used CSS to hide the element (display:none) when it was eventually added.
I have defined a custom editor for my Vaadin 7 Grid
longColumn.setEditorField(getTextArea());
where getTextArea() is:
private Field<?> getTextArea() {
TextArea ta=new TextArea();
ta.setWidth("300px");
ta.setHeight("200px");
return ta;
}
The TextArea appears to be of the given size, but it is cut to the height of the row, and is completely unusable.
Is there any way to make the editor to be bigger in order to use a TextArea that big?
Add a custom height via CSS by adding a new style using setRowStyleGenerator() to the Grid.
I build an app using smartGWT (3.1) (GWT: 2.5).
To hold changes to the various views (scrollbar-position in ListGrids etc.) I add all the views to the main canvas and just change their visibility (show() / hide())
(hide() all children then show() the one which was selected in the menu)
This works fine until I use hichcharts (gwt.highcharts-1.5.0.jar / highcharts.js -> 2.3.5).
no difference if I wrap the Chart in a smartGWT or GWT widget, when I hide the views some elements of the chart stays visible.
Ledgend-background, Ledgend-lines, and some dots from the data-points stays visible. It happens in firefox 18.0.2 and IE 9. In Chrome (24.0.1312.57 m) it works.
I try TabSet aswell. when i switch tabs (which should hide the 'old' tab) the same elements of the chart stays visible.
besides of the visibility-problem the still active Listener from the chart are another problem.
summary:
highcharts chart do not hide proper when parent-widgets hide (in firefox & IE).
For the display issues, and since you didn't provide any code example, I have used the wrapper provided on GWT Highcharts forum. With correct usage of hide/show calls (e.g. when tab is selected or deselected, call show or hide, respectively) I have managed to overcome the issue described in all browsers.
I had the same issue. I solved it by adding a tabSelectedHandler to the tabSet and inside that I show or hide the charts using StockChart.setVisible(boolean) depending on the selected tab.
tabSet.addTabSelectedHandler(new TabSelectedHandler()
{
#Override
public void onTabSelected(TabSelectedEvent event)
{
if (event.getTab().getTitle().equals("Charts"))
{
chart.setVisible(true);
}
else
{
chart.setVisible(false);
}
}
});