How to increase the width of an AngularJS Material datepicker

Question

I have something like this:

How is it possible to make the line under the "Date of recruitment" and the "down array" adapt to half of the layout as in flex="50" for example. It is pretty easy for normal input fields.

Current markup:

<md-content layout-padding> 
 <form> 
  <div layout-gt-xs="row"> 
   <md-input-container class="md-block" flex-gt-xs> 
      <label> date </label> 
      <md-datepicker ng-model="cv.contract.dateOfRecruitment"></md-datepicker> 
   </md-input-container>
   <md-input-container class="md-block" flex-gt-xs> 
      <label> months </label> 
          <input required ng-model="cv.contract.months" ng-pattern="/^[1-9][0-9]*$/" /> 
   </md-input-container> 
  </div>
 </form> 
</md-content>

Prothesis

Can you share the markup you are using currently please – Undercut

Yeah sorry, I have added the markup to the question. – Prothesis

Answer 1

See these tickets:

• https://github.com/angular/material/issues/9550
• https://github.com/angular/material/issues/9483

This feature won't be implemented due to layout troubles. But there's a workaround solution described here

Eat

Answer 2

There is no official documentation. You could consider using custom CSS.

Try to add width: 100% to the container of the date picker. It will increase width certainly. Of course, it assumes that the parent container of date picker is divided by half-width(50%) each other.

Carpentaria

Answer 3

Adding this property as !important worked for me

mat-form-field {
  width: 100px !important;
}

Sedimentation

Answer 4

You can set the size of the datepicker:

<input class="md-datepicker-input md-input" id="input_58" size="50">

Purvey