Utilizing md-dialog for presenting a form.
The form includes md-input-container which showcases input tags and select tags.
The final container displays
https://github.com/Gillardo/bootstrap-ui-datetime-picker<md-input-container class="md-block" flex-gt-sm>
<label>Time</label>
<p class="input-group">
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="scheduledJob.date" is-open="scheduledJob.open"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event, scheduledJob)">
<i class="fa fa-calendar"></i></button>
</span>
</p>
</md-input-container>
However, clicking on this results in the md-dialog displaying a scrollbar like so:
https://i.sstatic.net/ELetn.png
How can I adjust it so that this specific dropdown doesn't fall within the boundaries of the md-dialog? Check out this CodePen showcasing the issue I'm encountering.