Can someone help me with an odd issue I'm experiencing? I am trying to create a Horizontal Layout with buttons centered within 80% width, but it's not turning out as expected. Below is the HTML code along with the .css - I can provide the Java/Vaadin code if needed, although I believe the .CSS should be sufficient.
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("")
public class TestView extends VerticalLayout {
public TestView() {
Button test = new Button("Test");
test.setWidth("30%");
Button test1 = new Button("Test");
test1.setWidth("30%");
Button test2 = new Button("Test");
test2.setWidth("30%");
HorizontalLayout horizontalLayout = new HorizontalLayout(test, test1, test2);
horizontalLayout.setAlignItems(Alignment.CENTER);
horizontalLayout.setWidth("80%");
add(horizontalLayout);
// Center the view content on the page
setSizeFull();
// setJustifyContentMode(JustifyContentMode.CENTER);
setAlignItems(Alignment.CENTER);
}
}
https://i.sstatic.net/nO482.png
Please check if this works correctly on your end?
https://i.sstatic.net/zS5Cj.png
(Note: there is some extra orange space in this one):
https://i.sstatic.net/AFSyr.png
Additionally, the following pom.xml file may also be required:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
...
(Pom.xml contents omitted for brevity)
...
</project>
The desired layout outcome is shown here:
https://i.sstatic.net/Ci7w5.png
Using the following .HTML code snippet:
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div style="width: 80%;">
<div style="display: flex; justify-content: center;">
<button style="width: 30%;">Button 1</button>
<button style="width: 30%;">Button 2</button>
<button style="width: 30%;">Button 3</button>
</div>
</div>
</div>
</body>
</html>