1. 首页
  2. 问答
  3. Angular-js datepicker流出窗体的窗口

Angular-js datepicker流出窗体的窗口

2017-06-05 206 views
2

我在网页中添加了日期选择器，但是当我点击日历图标时，日期选择器正在流出窗口，看起来很奇怪。试图减少宽度，它不工作。我也添加了CSS文件。Angular-js datepicker流出窗体的窗口

<!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>

来源

2017-06-05 Anil Kumar K

回答

0

请尝试 宽度：自动;

我没有测试

来源

2017-06-05 07:19:26 Pax

+0

它没有工作 –

0 
.my-datepicker .form-control { 
    height: 10px; 
    width:10; 
    padding: 11px; 
}

我这里，日期选择器和表单控件具有相同的宽度。我的datepicker也有填充它的宽度。

独立的我，日期选择器和.FORM控制的宽度，通过将不同的风格{}

来源

2017-06-05 09:07:09 Pax

+0

这也没有工作 –

+0

哪有我分享屏幕截图 –

0

这个你试过

.form-control { 
    height: 10px; 
    width:10px; 
    padding: 11px; 
} 
     .my-datepicker{ 
    height: 10px; 
    width:auto; 
}

来源

2017-06-05 09:47:32 Pax

+0

是的，它影响所有的领域和datepicker没有工作 –

+0

datepicker如何不同于其他领域？ – Pax

相关问题

 相关问题