The date picker component is not responsive as other controls and it doesn't look good on the design the screen.
Create screen
Add line input
Add date picker
Press preview button
Expected behavior:
The date picker component should be responsive, the same with others controls, the label should be at the top.
Actual behavior:
The date picker input is displayed next to its' label either in design mode or in preview mode.
Solution
A new class (.datePicker) on the FormDatePicker.vue file was added to the date-picker input. This was done to change the css property: display: inline-block that was causing the issue. The display mode was changed to block to match the other inputs. Additionally for this fix, the !important rule was also implemented to avoid any compilation or bundling issues that were present from the last fix.
Issue & Reproduction Steps
The date picker component is not responsive as other controls and it doesn't look good on the design the screen.
Expected behavior: The date picker component should be responsive, the same with others controls, the label should be at the top.
Actual behavior: The date picker input is displayed next to its' label either in design mode or in preview mode.
Solution
.datePicker
) on the FormDatePicker.vue file was added to the date-picker input. This was done to change the css property:display: inline-block
that was causing the issue. The display mode was changed toblock
to match the other inputs. Additionally for this fix, the!important
rule was also implemented to avoid any compilation or bundling issues that were present from the last fix.How to Test
Test the steps above
Related Tickets & Packages
Code Review Checklist