我在我的网页上添加了日期选择器，但是当我点击日历图标时，日期选择器正在流出窗口，看起来很奇怪。试图减少宽度，它不工作。我也添加了CSS文件。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.my-datepicker .form-control {
height: 10px;
width:10;
padding: 11px;
}
.my-datepicker .btn {
padding: 1px 2px;
}
.dropdown-menu table {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info">
<strong>Status!</strong> {{ObjStatus}}
</div>
</div>
<div class="col-md-12">
<div class="form-group" >
<button type="button" class="btn btn-success pull-right" style="margin:1em" ng-click="editObj()" value="Edit" ng-show="Complete">Edit</button>
<button type="button" class="btn btn-info pull-right" style="margin:1em" ng-click="requestReview()" value="Submit" ng-hide="Review">Submit</button>
<button type="button" class="btn btn-success pull-right"style="margin:1em" ng-click="saveAllObj()" value="Save" ng-hide="Review">Save</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="menuTab1" class="btn btn-default btn-primary active" ng-click="tab1()" href="#tab1" data-toggle="tab">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Focus on Customer</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="menuTab2" class="btn btn-default" ng-click="tab2()" href="#tab2" data-toggle="tab">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Focus on Growth</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="menuTab3" class="btn btn-default" ng-click="tab3()" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Focus on Performance</div>
</button>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<!-- Quarter - 1 table -->
<div>
<div class="form-group" ng-hide="true">
<input type="button" class="btn btn-primary pull-right" ng-click="saveObj()" value="Save">
</div>
<table class="table table-striped table-bordered">
<thead>
<tr ng-hide="Review">
<th><input type="checkbox" ng-model="selectedAllObj" ng-click="checkAllObj()" /></th>
<th>Individual Objectives</th>
<th>Measurable Outcomes</th>
<th>Priority %</th>
<th>Key Activities</th>
<th>Completed By</th>
</tr>
<tr ng-hide="!Review">
<th>Individual Objectives</th>
<th>Measurable Outcomes</th>
<th>Priority %</th>
<th>Key Activities</th>
<th>Completed By</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="objectivesDetail in objectivesDetails" ng-hide="Review">
<td>
<input type="checkbox" ng-model="objectivesDetail.selected" />
</td>
<td>
<textarea class="form-control" rows="5" id="Individualid" ng-model="objectivesDetail.Individual" ></textarea>
</td>
<td>
<textarea class="form-control" rows="5" id="Measurableid" ng-model="objectivesDetail.Measurable" ></textarea>
</td>
<td>
<textarea class="form-control" rows="1" cols="1" id="Priorityid" ng-model="objectivesDetail.Priority" ></textarea>
</td>
<td>
<textarea class="form-control" rows="5" id="Keyid" ng-model="objectivesDetail.Key" ></textarea>
</td>
<td>
<p class="input-group my-datepicker">
<input type="text" size="1" class="form-control" datepicker-popup="{{format}}" ng-model="objectivesDetail.Completed" is-open="objectivesDetail.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,objectivesDetail)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</td>
</tr>
<tr ng-repeat="objectivesDetail in objectivesDetails" ng-hide="!Review">
<td>
{{objectivesDetail.Individual}}
</td>
<td>
{{objectivesDetail.Measurable}}
</td>
<td>
{{objectivesDetail.Priority}}
</td>
<td>
{{objectivesDetail.Key}}
</td>
<td>
{{objectivesDetail.Completed | date : "dd-MMM-yyyy"}}
</td>
</tr>
</tbody>
</table>
<div class="form-group" ng-hide="Review">
<button ng-hide="!objectivesDetails.length" style="margin:1em" type="button" class="btn btn-danger pull-right" ng-click="removeObj()" value="Remove">Remove</button>
<button type="button" class="btn btn-primary addnew pull-right" style="margin:1em" ng-click="addNewObj(objectivesDetails)" value="Add New" ng-disabled="objectivesDetails.length>employeeCount">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<!-- Quarter - 1 table -->
<div>
<div class="form-group" ng-hide="true">
<input type="button" class="btn btn-primary pull-right" ng-click="saveObjGro()" value="Save">
</div>
<table class="table table-striped table-bordered">
<thead>
<tr ng-hide="Review">
<th><input type="checkbox" ng-model="selectedAllObjGro" ng-click="checkAllObjGro()" /></th>
<th>Individual Objectives</th>
<th>Measurable Outcomes</th>
<th>Priority %</th>
<th>Key Activities</th>
<th>Completed By</th>
</tr>
<tr ng-hide="!Review">
<th>Individual Objectives</th>
<th>Measurable Outcomes</th>
<th>Priority %</th>
<th>Key Activities</th>
<th>Completed By</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="objectivesDetailGro in objectivesGroDetails" ng-hide="Review">
<td>
<input type="checkbox" ng-model="objectivesDetailGro.selected" />
</td>
<td>
<textarea class="form-control" rows="5" id="IndividualGroid" ng-model="objectivesDetailGro.IndividualGro"></textarea>
</td>
<td>
<textarea class="form-control" rows="5" id="MeasurableGroid" ng-model="objectivesDetailGro.MeasurableGro"></textarea>
</td>
<td>
<textarea class="form-control" rows="1" cols="1" id="PriorityGroid" ng-model="objectivesDetailGro.PriorityGro"></textarea>
</td>
<td>
<textarea class="form-control" rows="5" id="KeyGroid" ng-model="objectivesDetailGro.KeyGro"></textarea>
</td>
<td>
<p class="input-group my-datepicker">
<input type="text" size="1" class="form-control" datepicker-popup="{{format}}" ng-model="objectivesDetailGro.CompletedGro" is-open="objectivesDetailGro.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,objectivesDetailGro)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</td>
</tr>
<tr ng-repeat="objectivesDetailGro in objectivesGroDetails" ng-hide="!Review">
<td>
{{objectivesDetailGro.IndividualGro}}
</td>
<td>
{{objectivesDetailGro.MeasurableGro}}
</td>
<td>
{{objectivesDetailGro.PriorityGro}}
</td>
<td>
{{objectivesDetailGro.KeyGro}}
</td>
<td>
{{objectivesDetailGro.CompletedGro | date : "dd-MMM-yyyy"}}
</td>
</tr>
</tbody>
</table>
<div class="form-group" ng-hide="Review">
<button ng-hide="!objectivesGroDetails.length" type="button" style="margin:1em" class="btn btn-danger pull-right" ng-click="removeObjGro()" value="Remove">Remove</button>
<button type="button" class="btn btn-primary addnew pull-right" style="margin:1em" ng-click="addNewObjGro(objectivesGroDetails)" value="Add New" ng-disabled="objectivesGroDetails.length>employeeCount">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab3">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<!-- Quarter - 1 table -->
<div>
<div class="form-group" ng-hide="true">
<input type="button" class="btn btn-primary pull-right" ng-click="saveObjPre()" value="Save">
</div>
<table class="table table-striped table-bordered">
<thead>
<tr ng-hide="Review">
<th><input type="checkbox" ng-model="selectedAllObjPre" ng-click="checkAllObjPre()" /></th>
<th>Individual Objectives</th>
<th>Measurable Outcomes</th>
<th>Priority %</th>
<th>Key Activities</th>
<th>Completed By</th>
</tr>
<tr ng-hide="!Review">
<th>Individual Objectives</th>
<th>Measurable Outcomes</th>
<th>Priority %</th>
<th>Key Activities</th>
<th>Completed By</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="objectivesDetailPer in objectivesPreDetails" ng-hide="Review">
<td>
<input type="checkbox" ng-model="objectivesDetailPer.selected" />
</td>
<td>
<textarea class="form-control" rows="5" id="IndividualPreid" ng-model="objectivesDetailPer.IndividualPre"></textarea>
</td>
<td>
<textarea class="form-control" rows="5" id="MeasurablePreid" ng-model="objectivesDetailPer.MeasurablePre"></textarea>
</td>
<td>
<textarea class="form-control" rows="1" cols="1" id="PriorityPreid" ng-model="objectivesDetailPer.PriorityPre"></textarea>
</td>
<td>
<textarea class="form-control" rows="5" id="KeyPreid" ng-model="objectivesDetailPer.KeyPre"></textarea>
</td>
<td>
<p class="input-group my-datepicker">
<input type="text" size="1" class="form-control" datepicker-popup="{{format}}" ng-model="objectivesDetailPer.CompletedPre" is-open="objectivesDetailPer.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,objectivesDetailPer)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</td>
</tr>
<tr ng-repeat="objectivesDetailPer in objectivesPreDetails" ng-hide="!Review">
<td>
{{objectivesDetailPer.IndividualPre}}
</td>
<td>
{{objectivesDetailPer.MeasurablePre}}
</td>
<td>
{{objectivesDetailPer.PriorityPre}}
</td>
<td>
{{objectivesDetailPer.KeyPre}}
</td>
<td>
{{objectivesDetailPer.CompletedPre | date : "dd-MMM-yyyy"}}
</td>
</tr>
</tbody>
</table>
<div class="form-group" ng-hide="Review">
<button ng-hide="!objectivesPreDetails.length" style="margin:1em" type="button" class="btn btn-danger pull-right" ng-click="removeObjPre()" value="Remove">Remove</button>
<button type="button" class="btn btn-primary addnew pull-right" style="margin:1em" ng-click="addNewObjPre(objectivesPreDetails)" value="Add New" ng-disabled="objectivesPreDetails.length>employeeCount">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
你试过
.form-control {
height: 10px;
width:10px;
padding: 11px;
}
.my-datepicker{
height: 10px;
width:auto;
}