[BUG]

[hisuwh]

Environment

Please provide as many details as you can:

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
  • Version: vue-formio@4.0.4
• Formio.js version: 4.11.0
• Frontend framework: vue
• Browser: Chrome
• Browser version: 84.0.4147.89

Steps to Reproduce

1. Build form with datetime on formio.github.io
2. Render form with vue-formio

<formio :form="form" />

import { Form, Templates } from "vue-formio";

Templates.framework = "bootstrap";

const form = {
    display: "form",
    components: [
         ....
         {
              label: "Date of birth",
              labelPosition: "left-left",
              displayInTimezone: "utc",
              format: "dd-MM-yyyy",
              tableView: false,
              enableMinDateInput: false,
              datePicker: {
                   disableWeekends: false,
                   disableWeekdays: false
              },
              enableMaxDateInput: false,
              enableTime: false,
              key: "dateOfBirth",
              type: "datetime",
              input: true,
              widget: {
                   type: "calendar",
                   displayInTimezone: "utc",
                   language: "en",
                   useLocaleSettings: false,
                   allowInput: true,
                   mode: "single",
                   enableTime: false,
                   noCalendar: false,
                   format: "dd-MM-yyyy",
                   hourIncrement: 1,
                   minuteIncrement: 1,
                   time_24hr: false,
                   minDate: null,
                   disableWeekends: false,
                   disableWeekdays: false,
                   maxDate: null
              },
              hideOnChildrenHidden: false
          },
      ...
      ]
}

export default {
    name: "MyComponent",
    components: {
        formio: Form
    },
    data: () => ({
        form
    })
};

Expected behavior

Should display a datepicker

Observed behavior

Datepicker not displayed and giant icons displayed after form. (Also labelPosition: "left-left" is ignored).

[hisuwh]

I've got the same problem with selects as well:

[wag110894]

Hello @hisuwh,

It looks like you have not pulled in the CSS files into your application. Once you pull this in, then everything will look correct.

I hope that this helps.

[hisuwh]

🤦‍♂️ thanks. This should probably mentioned in the docs for vue-formio though

[randallknutson]

You are right, we will add a task to add this to our documentation.

[Tatsiana8]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!