fix(b-calendar, b-form-datepicker): minor adjustments to styling and example updates (#5211)

tmorehouse · jacobmllr95 · web-flow · commit f0d8ffe42530 · 2020-04-22T08:20:05.000+02:00
* fix(b-calendar, b-form-datepicker): minor adjustments to styling

* Update form-datepicker.js

* Update README.md

Co-authored-by: Jacob M&uuml;ller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/calendar/_calendar.scss b/src/components/calendar/_calendar.scss
@@ -37,6 +37,11 @@
     // Easy rounded corners on contained elements,
     // specifically the footer of the calendar grid
     overflow: hidden;
+
+    .row {
+      // Prevent grid rows from wrapping
+      flex-wrap: nowrap;
+    }
   }
 
   .b-calendar-grid-caption {
diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md
@@ -481,6 +481,39 @@ You can use the `isRTL` scoped property to "flip" the prev vs next button conten
 left-to-right to right-to-left orientation change &mdash; i.e. the previous year button will be on
 the right when `isRTL` is `true`, instead of the left.
 
+### Full width calendar dropdown
+
+To create a full width calendar dropdown (where the width matches the input width), simply set the
+`menu-class` prop to `'w-100'` and set the `calendar-width` prop to `'100%'`:
+
+```html
+<template>
+  <div>
+    <label for="datepicker-full-width">Choose a date</label>
+    <b-form-datepicker
+      id="datepicker-full-width"
+      v-model="value"
+      menu-class="w-100"
+      calendar-width="100%"
+      class="mb-2"
+    ></b-form-datepicker>
+    <p>Value: '{{ value }}'</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      }
+    }
+  }
+</script>
+
+<!-- b-form-datepicker-full-width.vue -->
+```
+
 ## Internationalization
 
 Internationalization of the date picker's calendar is provided via
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
@@ -530,7 +530,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       {
         key: 'calendar',
         ref: 'calendar',
-        staticClass: 'b-form-date-calendar',
+        staticClass: 'b-form-date-calendar w-100',
         props: this.calendarProps,
         on: {
           selected: this.onSelected,

Original file line number	Diff line number	Diff line change
`@@ -530,7 +530,7 @@ export const BFormDatepicker = /#__PURE__/ Vue.extend({`
`530`	`530`	`{`
`531`	`531`	`key: 'calendar',`
`532`	`532`	`ref: 'calendar',`
`533`		`- staticClass: 'b-form-date-calendar',`
	`533`	`+ staticClass: 'b-form-date-calendar w-100',`
`534`	`534`	`props: this.calendarProps,`
`535`	`535`	`on: {`
`536`	`536`	`selected: this.onSelected,`