Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can one right align components in a HorizontalLayout component cell of a TreeGrid component column? #12319

Open
alexandru-prigoreanu opened this issue Jun 1, 2021 · 3 comments
Labels
enhancement workaround Workaround provided in ticket comments

Comments

@alexandru-prigoreanu
Copy link

alexandru-prigoreanu commented Jun 1, 2021

Hello! First of all thank you for your work.

  • Vaadin Framework version - 8.12.3
  • Browser version - chrome 90.0.4430.212
  • Description of the bug
    I have a TreeGrid with 2 component columns. The first component column contains a HorizontalLayout with a Label and a Button. The second component column contains a HorizontalLayout with a Button. I was not able to right align the Button in the first component column. Is it doable?
    vaadingithub

Thank you!

  • Minimal reproducible example
TreeGrid<Object> treeGrid = new TreeGrid<>();
treeGrid.setSizeFull();
treeGrid.addComponentColumn(vp -> {
    Button button = new Button("button");
    HorizontalLayout cell = new HorizontalLayout(new Label("label"), button);
    cell.setSizeFull();
    cell.setExpandRatio(button, 1.0f);
    cell.setComponentAlignment(button, Alignment.MIDDLE_RIGHT);
    return cell;
}).setCaption("st column").setExpandRatio(1).setId("st column");
treeGrid.addComponentColumn(vp -> new HorizontalLayout(new Button("some other button")))
        .setCaption("nd column").setId("nd column").setWidth(200.0d);
TreeData<Object> objectTreeData = new TreeData<>();
objectTreeData.addRootItems(new Object());
treeGrid.setDataProvider(new TreeDataProvider<>(objectTreeData));
window.setContent(treeGrid);
UI.getCurrent().addWindow(window);
window.center();
window.setWidth("40%");
window.setHeight("40%");```

@Ansku
Copy link
Member

Ansku commented Jun 2, 2021

This is technically a missing feature in how TreeGrid and ComponentRenderer play together, but I posted a workaround to the corresponding question in StackOverFlow. I'll have to think about whether it would be possible to add support for this use case in the framework itself.

@Ansku Ansku added the workaround Workaround provided in ticket comments label Jun 2, 2021
@alexandru-prigoreanu
Copy link
Author

thank you @Ansku ! probably the undefined width on the node helps the grid to correctly calculate the width of the column based on the most wide cell. when i use width 100% on the node and width 100% on the HorizontalLayout my first column is as wide as the widest cell that does not contain a HorizontalLayout.

@Ansku
Copy link
Member

Ansku commented Jun 3, 2021

Yes, using CSS with columns always interferes with those calculations. It's part of the reason why it's not a trivial thing to add a built-in support for the feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement workaround Workaround provided in ticket comments
Projects
None yet
Development

No branches or pull requests

3 participants