I tried both padding and margin to get the button inside the Div boundary but no luck. It is still outside of the Div.
What could be the issue ?
What could be the issue ?
Need space on both side and I tried padding left and right. Left is OK but it is moving the whole to the right side which is going outside the layout. Any clue?
Looks like your text field has a hard coded width. Hard to help without seeing the source code or DOM structure.
Maybe this is what you’re looking for?
textField.setWidthFull();
HorizontalLayout buttons = new HorizontalLayout(btn1, btn2);
buttons.addClassName(LumoUtility.Gap.SMALL); // Space between two buttons
HorizontalLayout hl = new HorizontalLayout(textField, buttons);
hl.setWidthFull();
hl.addClassName(LumoUtility.Padding.Horizontal.MEDIUM); // Padding on the sides of the row
hl.addClassName(LumoUtility.Gap.XLARGE); // Space between field and buttons
Yes, this solved the textfield issue. I followed the same approach for the accordion header and that too worked but the problem is, the content is not moving along with
if I adding padding to the accordion itself, it is going outside the view.
. My intention is to create something like this
Ok, in that case you should have this
AccordionPanel accordionPanel = new AccordionPanel(hl, new Span("Content"));
accordionPanel.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.CONTRAST_10, LumoUtility.BorderRadius.MEDIUM, LumoUtility.Background.CONTRAST_5);
Accordion accordion = new Accordion();
accordion.setWidthFull();
accordion.add(accordionPanel);
AccordionPanel has built-in filled theme variant for setting the background which will also add padding to header and content. In your case the content area (grid) shouldn’t have a padding so you can add padding just to the heading with CSS. I’m only adding it to left as in my previous example the HorizontalLayout already had padding on the sides.
vaadin-accordion-heading {
padding-left: var(--lumo-space-m);
}
Looks like a box-sizing issue. Try this:
vaadin-accordion {
box-sizing: border-box;
}
Also, make sure you’re not placing interactive elements such as input fields and buttons inside vaadin-accordion-heading. Its content has role="button" and nesting interactive elements is a no-go from an accessibility (and HTML spec) perspective.
IIRC, LumoUtility.BorderColor.CONTRAST_10 is the default border color, so it can be omitted.
I see the role as heading here
But anyways I’ll go with your advice. I’ll remove those interactive components from the header.
Correct but if you open up the #shadow-root you’ll see the content is placed inside a button.
