Vaadin 14.4.7
I have a Select component on my form. If the items in the select list are enough in number, the top of the expanded list touches the top of the window and the list shows two vertical scroll bars. If I move the Layout in which the Select exists down a bit, things look okay. I was wondering, though, if there was a way to align the list of items and have it center on the Select box.
This is the image of the scroll bars:
This is the app as a whole:
This is the code that creates the Select box:
variableColumnColumnSelectbox = new Select<>();
variableColumnColumnSelectbox.setLabel("Column:");
variableColumnColumnSelectbox.getElement().getThemeList().add("selectoverlaycustom");
variableColumnColumnSelectbox.setItemLabelGenerator(DimClmn::getClmnRptHdngCd);
variableColumnColumnSelectbox.setEnabled(false);
And this is the code to create the Horizontal Layout in which the row of Select boxes resides, with my fix to move it down a little commented out:
private HorizontalLayout buildVariableColumnsGridLayout() {
HorizontalLayout variableColumnsGridHorzLayout = new HorizontalLayout();
variableColumnsGridHorzLayout.getElement().getStyle().set("max-width", "70%");
variableColumnsGridHorzLayout.getElement().getStyle().set("margin", "auto");
/*
* This top margin value is set in order to move the variables column grid down
* so that the column select box in the grid form has room to display all of the
* values properly. If the report has a lot of columns, this select list will
* show two vertical scroll-bars. I don't know why.
*/
// variableColumnsGridHorzLayout.getElement().getStyle().set("margin-top",
// "10px");
createVariableColumnsGridLayout(variableColumnsGridHorzLayout);
return variableColumnsGridHorzLayout;
}
Well, I finally figured this out. I was able to get the inner scroll bar removed with a CSS rule applied to vaadin-list-box:
[part="items"]{
overflow-y: unset;
}
So simple.
(Really, as I look at it now, I posed my question incorrectly. I should have asked how to remove the inner scroll bar, which is what I was really after.)
Related
I would like to use FormLayout where one of the fields is visible depending on another field. Is there a way to keep the formatting the same, that is for all the fields after it to stay in their same position when another component is invisible.
Below is the code to reproduce as well as a screenshots of what I would like compared to the current behavior. In essence each time you select the combobox you make the "Year Joined Team" field invisible/visible.
TextField nameTextField = new TextField("Name");
ComboBox<String> teamComboBox = new ComboBox<>("Team");
DatePicker yearJoinedDatePicker = new DatePicker("Year Joined Team");
TextField moreFieldsTextFields = new TextField("More fields");
FormLayout formLayout = new FormLayout();
formLayout.setWidth("600px");
formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 2, FormLayout.ResponsiveStep.LabelsPosition.TOP));
formLayout.add(nameTextField,
teamComboBox, yearJoinedDatePicker,
moreFieldsTextFields);
teamComboBox.setItems(List.of("One", "Two"));
teamComboBox.addValueChangeListener(change -> yearJoinedDatePicker.setVisible(!yearJoinedDatePicker.isVisible()));
formLayout.setColspan(nameTextField, 2);
add(formLayout);
Ideally the goal is to have the fields below the yearJoinedTeamDatePicker component to stay below so that all other components below continue to be aligned correctly when it's set to be invisible.
Instead what actually happens is that all the components are shifted on field to the left, as if the invisible component is no longer part of the FormLayout. Meaning the moreFieldsTextField is now on a different row, and if everything is setup for two columns every row will be incorrect. I understand that this makes sense in some context but in a FormLayout is there a way to keep the form formatted if a component is invisible?
If for example I had firstname and lastname as two side by side fields they would now be on different rows as shown below:
A very hacky solution would be to add in a Span component or something like that and make it invisible when the yearJoinedDatePicker field is visible, and invisible when it's visible. Basically fill it in with an empty field when it's invisible. That is a hacky workaround but it doesn't seem like an appropriate solution. With that in mind is there a way to keep the formatting/layout if a component is invisible?
What you are trying to achieve is sort of defying the purpose of FormLayout. FormLayout has css flex rules to wrap elements / components by row. Thus if you switch visibility of a component, the behavior is as you described.
One thing you could do, is to wrap "Team" and "Year joined team" inside e.g. HorizontalLayout and set
formLayout.setColspan(horizontalLayout, 2);
See, also my previous answer about FormLayout https://stackoverflow.com/a/69270190/8962195
If you want to keep the place, maybe it's vable for you to set the field ti disabled with setEnabled.
I'm not sure how it would behave, but you could try CSS display: none instead of the setVisibility(false).
In Vaadin 14 Flow I have the following code:
Grid grid = new Grid();
setupGrid(grid);
Button compactButton = new Button("Compact",
click -> grid.addThemeVariants(GridVariant.LUMO_COMPACT));
Button normalButton = new Button("Normal",
click -> grid.removeThemeVariants(GridVariant.LUMO_COMPACT));
The issue is when I click on the above buttons only the header of the grid seems to be redrawn when the buttons are clicked, the rows below the header (all the rows of the table) do not appear to be affected. They seem to stay at whatever variant they were initially set at when the screen was initially drawn (other than the header). Is there a way to programmatically adjust the theme of the grid through a button?
You can call grid.getDataProvider().refreshAll(); after changing the theme for it to be applied to all rows.
My codepen has a jquery-ui sortable on a table. A few problems that I see are: 1) selecting a row to drag adjusts table width during selection, but resumes to the correct table width after it is dropped. 2) The selected table row shifts outside of left border of the table containment. 3) The selected table row loses the table styling. The data scrunches up apparently losing its default padding-right of 10px.
I am running Windows 7 and use chrome browser rev 56.0.2924.87
May someone can answer me the redundant need to post code before one can post?
Putting the bare minimum code here. See pen for full code.
<table class="playlist-table">
I was unable to find this question prior to posting my problems:
jquery UI Sortable with table and tr width
Thanks go to Yaroslav for this helper class that fixed issue#3. The selected table row now preserves styling after being selected.
.ui-sortable-helper {
display: table;
}
And to Keith, his code fixed issues 1) selecting a row to drag adjusts table width during selection. 2) The selected table row shifts outside of left border of the table containment.
$('td, th', '.playlist-table').each(function () {
var cell = $(this);
cell.width(cell.width());
});
Here i make a listview with sectionHeader, and then i supply a sub navigator for quick navigation, just like the contact list ,,the question is :
The listview has 3000 rows, when first come to the view, i click 'z' to quickly navigate to bottom of listview,,but i had to wait for the all the section redered.
Any some best ways to solve the problem?
I have a tableView with multiple TableViewRow objects, always 4.
When the edit button is clicked the row can be reordered, which is working.
But when the edit button is clicked the elements inside of a row seem to be moved with margins from left and right.
The items in a row should not be moved, so I was hoping someone could tell me how I can make sure the labels inside a row element are not being moved around when edited.
I have included some images, hoping to clarify my question:
Rows when not edited
Rows when edited
The solution was easy, but I didnt know.
The way to achieve this; Add a view to each row and do NOT set the left or right properties.
This way the delete button and move icon are not pushing the inner view away.
Its a default behavior. I dont think there's any way defined in Titanium API to override the moving of inner elements. So you cannot change this default behavior.