fix: fix responsiveness on mobile resolutions

Close #3
FlowingCode · Jan 26, 2024 · 1ebc4d4 · 1ebc4d4
1 parent 5feec64
commit 1ebc4d4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java b/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java
@@ -81,6 +81,7 @@ private void setState(boolean state) {
    */
   public DayOfWeekSelector() {
     getStyle().set("padding", "var(--lumo-space-m)");
+    this.setWidthFull();
 
     buttonsLayout = new HorizontalLayout();
     buttonsLayout.add(new DayOfWeekButton(DayOfWeek.SUNDAY, "S"));
@@ -91,6 +92,8 @@ public DayOfWeekSelector() {
     buttonsLayout.add(new DayOfWeekButton(DayOfWeek.FRIDAY, "F"));
     buttonsLayout.add(new DayOfWeekButton(DayOfWeek.SATURDAY, "S"));
 
+    buttonsLayout.setClassName("fc-days-of-week-selector-buttons-layout");
+
     getButtons().forEach(button -> button.addClickListener(ev -> updateValue()));
     add(buttonsLayout);
     clear();

diff --git a/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css b/src/main/resources/META-INF/frontend/styles/fc-days-of-week-selector-styles.css
@@ -43,3 +43,10 @@ vaadin-custom-field[readonly] vaadin-button.fc-days-of-week-selector-button[disa
 vaadin-custom-field[readonly] vaadin-button.fc-days-of-week-selector-button[theme~='primary'][disabled] {
     border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct));
 }
+
+vaadin-horizontal-layout.fc-days-of-week-selector-buttons-layout {
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 0 10px;
+}