Unable to set overflow in vaadin dialog

Hello Team, I’m using the latest vaadin version and i have extended vaadin dialog to my pop up after component creation im getting unnecessary overflow

I’m trying to set it using setProperty(“overflow”,“hidden”) and setAttribute(“overflow”,“hidden”)
But overflow is still visible I can’t see my newly added attribute overflow in the inspector

Can anyone help I’m weak in css

When i right click and inspect that overflow bar I’m getting it caused by .resizer-container please see attached image

A screenshot of the dialog itself would be very helpful

Im trying getClassnames() but it returns an empty array

You can only access classes set from the Server-Side with this.

Can you please share any code examples to do it

getClassNames will return empty if you haven’t added classnames

anyway, I suspect that you’re trying to fix your problem in the wrong way. A screenshot of the dialog would help us understand what’s wrong

The code that produces the Dialog would also help

Hi here is my code,

public class MyCustomDialog extends Dialog {

private Label dialogtitle;

public MyCustomDialog() {

}

public MyCustomDialog(String title) {
    super();
    generateCloseButton();
    generateDialogTitle();
    
    if (title != null) {
        setDialogTitle(title);
    }
    setResizable(true);
    setDraggable(true);
}

private void generateDialogTitle() {
    dialogtitle = new Label();
    add(title);
}


private void generateCloseButton() {
    Button closeBtn = new Button();
    closeBtn.setIcon(VaadinIcon.CLOSE.create());
    closeBtn.addClickListener(l -> close());
    closeBtn.addThemeVariants(ButtonVariant.LUMO_SMALL, ButtonVariant.LUMO_ICON);
    add(closeBtn);
}

@Override
public void removeAll() {
    super.removeAll();
    generateCloseButton();
    generateDialogTitle();
}

    public void setDialogTitle(String title) {
    this.dialogTitle.setText(title);
}

}

public class ComponentPopUp extends MyCustomDialog{

//contains some fields

ComponentPopUp(String value){
if(value!=null){

HorizontalLayout Layout1= new HorizontalLayout(someLabels,TextAreas);
VerticalLayout v1= new VerticalLayout(formLayout);
VerticalLayout v2= new VerticalLayout(addSomeLabels,TextFields);
HorizontalLayout Layout2= new HorizontalLayout(buttonsLayout);

VerticalLayout mainLayout= new VerticalLayout(Layout1,v1,v2,Layout2);
setDialogTitle(value);
//adding it MyCustomDialog
setResizable(true);
setWidth(“90%”);
setHeight(“90%”);
add(mainLayout)
}
else{
//do nothing
}

}

It’s hard to understand what you wanna archive with that piece of art. Are you talking about a scrollbar within the dialog?

P.S. Dialog have a title you can use. Label should NEVER be used like this. Overriding the removeAll method doesn’t make any sense with the shown code.

Without knowing what this looks like to get a better understanding of the issue, I’m just guessing here, but one thing that pokes my eye is that you’re not setting any sizing for the layouts in the dialog.

Dialog sizing can work in two ways:

  1. You set a size on the dialog (like above) and make sure the content somehow fits into to that (typically by setting some sizes to it too), or allow it to overflow with scrollbars
  2. You leave the dialog size undefined, and instead let the content determine its size

As you’re going with option 1 here, the question is how you want the content to behave inside. If you don’t want it to overflow and scroll, you should at least setSizeFull on the mainLayout, and widths on the sub-layouts inside it.