Wrong formatting for date picker under FgInput

[ghost]

Hello there,

I have been trying to add a DatePicker to one of my forms, and as indicated by the documentation, I have wrapped it around an FgInput in order to make it match the other fields. The problem is that while the documentation displays the picker correctly, I have some trouble with its format.

Currently my picker is being displayed like this:

While in the documentation it is displayed like this:

The text is not having the icon in consideration, and therefore, it is overlapping with it.

Just for additional info, here is the code snippet I have been using:

<template>
  <div>
    <fginput>
      <el-date-picker
        type=""
        format="dd / MM / yyyy"
        placeholder="Placeholder"
      />
    </fginput>
  </div>
</template>

<script>
import { FgInput } from '@/components/paper'
import { DatePicker } from 'element-ui'


export default {
  name: 'Register',
  components: {
    'fginput': FgInput,
    'el-date-picker': DatePicker
  }
}
</script>

This being made with version 2.2.0 of the template and 2.5.4 of element-ui.

Thanks in advance.

[OmarKan]

Adding this:

.form-group .el-date-editor .el-input__inner {
    padding-left: 30px;
  }

To the style of the page, fixed it for me. 

[kwatog]

happened to me after upgrading from v2.0 to v2.2.
ended up adding the styling below on my custom scss

.el-input--prefix .el-input__inner {
    padding-left: 30px;
}

if it does not work for you,

.el-input--prefix .el-input__inner {
    padding-left: 30px!important;
}

notice the !important. I only do that if I can't trace where the problem is coming from. In this case, cannot change the sequence of imports.

[ghost]

Yes, that solves the problem.

Thank you.