none
In Jquery data table calender is not showing fully RRS feed

  • Question

  • In Jquery data table , there is a row , in which there is a bootstrap calender, so calender is not showing fully. 

    Screen shot:

        <div id="Div2" style="height:auto;overflow-x: scroll;width:100%;display:none;">
            <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover table-sm" id="DTable2" data-page-length='6' style="width:100%;height:auto;">
              <thead>
                <tr>
                <th>Sr. No.</th>
                 <th>Request Date</th>
                 <th>Pick Up Date</th>
    <th>Pick Up Time</th>
                  <th>Source Pick Up Address</th>
                  <th>Destination Pick Up Address</th>
                     <th>Drop Date</th>
                      <th>Drop Time</th>
                     <th>Drop Source Address</th>
                  <th>Drop Destination Address</th>
                    <th>Reason</th>
                    <th>PM Approval</th>
                    <th>Cab Status</th>
                    <th></th>
                    <th></th>
                   </tr>
              </thead>
              <tbody id="tblbody2">
              </tbody>
            </table>
          </div>



    Friday, December 13, 2019 12:49 PM

All replies

  • Hi,

    I suggest you provide more code for further research.

    Please check my test code, it working fine.

    <div id="Div2" style="height: auto; overflow-x: scroll; width: 100%;"> 
       <table summary="This table shows how to create responsive tables using Bootstrap&#39;s default functionality" class="table table-bordered table-hover table-sm" id="DTable2" data-page-length="6" style="width: 100%; height: auto;"> 
          <thead> 
             <tr> 
                <th>Sr. No.</th> 
                <th>Request Date</th> 
                <th>Pick Up Date</th> 
                <th>Pick Up Time</th> 
                <th>Source Pick Up Address</th> 
                <th>Destination Pick Up Address</th> 
                <th>Drop Date</th> 
                <th>Drop Time</th> 
                <th>Drop Source Address</th> 
                <th>Drop Destination Address</th> 
                <th>Reason</th> 
                <th>PM Approval</th> 
                <th>Cab Status</th> 
                <th></th> 
                <th></th> 
             </tr> 
          </thead> 
          <tbody id="tblbody2"> 
             <tr> 
                <td>1</td> 
                <td>
                   <input type="date"/>
                </td> 
                <td> 
    				<div class="controls input-append date form_date" data-date-format="dd/mm/yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> 
    					<input size="16" type="text"/> <span class="add-on"><i class="icon-th"></i></span> &#160;
    				</div> 
                </td> 
                <td></td>
                <td></td>
                <td><br/></td>
                <td></td>
                <td></td>
                <td><br/></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
             </tr> 
          </tbody> 
       </table> 
    </div> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
    $('.form_date').datetimepicker({
    	language: 'en',
    	weekStart: 1,
    	todayBtn: 1,
    	autoclose: 1,
    	todayHighlight: 1,
    	startView: 2,
    	minView: 2,
    	forceParse: 0
    });
    </script> 

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, December 16, 2019 7:37 AM
    Moderator
  • Kindly find my code:

    $("#tblbody2").append("<tr>"+
    "<td>"+SRNo+"</td>"+
    "<td>"+actDate+"</td>"+
    "<td>"+"<span id='WeekPickUpDate"+ClientID+"'>"+PickUpDate+"</span><input  type='text' class='datetimepicker DateCls' id='WeekEditPickUpDate"+ClientID+"' value='"+PickUpDate+"' style='display:none;'></td>"+
    "<td>"+"<span id='WeekPickUpTime"+ClientID+"'>"+PickUpTimeTime+"</span>"+"<input  type='text' class='timepicker TimeCls' id='WeekEditPickUpTime"+ClientID+"' value='"+PickUpTimeTime+"' style='display:none;'></td>"+
    "<td>"+"<span id='WeekPickUpSourceAddress"+ClientID+"'>"+PickUpSourceAddress+"</span>"+"<input  type='text' id='WeekEditPickUpSourceAddress"+ClientID+"' value='"+PickUpSourceAddress+"' style='display:none;'></td>"+
    "<td>"+"<span id='WeekPickUpDestinationAddress"+ClientID+"'>"+PickUpDestinationAddress+"</span>"+"<input  type='text' id='WeekEditPickUpDestinationAddress"+ClientID+"' value='"+PickUpDestinationAddress+"' style='display:none;'>"+"</td>"+
    "<td>"+"<span id='WeekDropRequestDate"+ClientID+"'>"+DropRequestDate+"</span><input  type='text' class='datetimepicker DateCls' id='WeekEditDropRequestDate"+ClientID+"' value='"+DropRequestDate+"' style='display:none;'> </td>"+
    "<td>"+"<span id='WeekDropTime"+ClientID+"'>"+DropTime+"</span>"+"<input  type='text' class='timepicker TimeCls' id='WeekEditDropTime"+ClientID+"' value='"+DropTime+"' style='display:none;'></td>"+
    "<td>"+"<span id='WeekDropSourceAddress"+ClientID+"'>"+DropSourceAddress+"</span>"+"<input  type='text' id='WeekEditDropSourceAddress"+ClientID+"' value='"+DropSourceAddress+"' style='display:none;'>"+"</td>"+
    "<td>"+"<span id='WeekDropDestinationAddress"+ClientID+"'>"+DropDestinationAddress+"</span>"+"<input  type='text' id='WeekEditDropDestinationAddress"+ClientID+"' value='"+DropDestinationAddress+"' style='display:none;'>"+"</td>"+
    "<td>"+"<span id='WeekReason"+ClientID+"'>"+Reason+"</span>"+"<input  type='text' id='WeekEditReason"+ClientID+"' value='"+Reason+"' style='display:none;'>"+"</td>"+
    "<td>"+Status+"</td>"+
    "<td>"+CabAssign+"</td>"+
    "<td>"+"<a  href='#' onclick=Redirect("+ClientID+",'"+ManagerEmail+"','"+encodeURIComponent(ApprovingManager)+"','"+encodeURIComponent(EmployeeName)+"','"+EmployeeEmail+"','"+CabReqType+"') class='hitview'>"+
    "<span class='spanclassE' title='Cancel Request'>  <i class='fa fa-close'></i></span></a>"+
    "</td>"+
    "<td>"+"<button class='btn btn-info btn-sm' id='EditBtn"+ClientID+"' type='button' onclick=CheckForPending("+ClientID+","+Tablename+"); style='min-width: 1px' class='btn btn-primary' title='Edit your request'>Edit</button>"+"<button id='UpdateBtn"+ClientID+"' type='button' onclick='UpdateWeekRequest("+ClientID+");' style='min-width: 1px;display:none;' class='btn btn-info btn-sm' title='Update your request'>Update</button> <button type='button' onclick=window.location.reload(); id='CancelBtn"+ClientID+"' type='button' style='min-width: 1px;display:none;' class='btn btn-info btn-sm' title='Cancel your request'>Cancel</button>"+"</td>"+

    "</tr>");


    Shiv Sharma

    Wednesday, December 18, 2019 9:48 AM
  • kindly tell me whats i ahve to update in my code

    Shiv Sharma

    Wednesday, December 18, 2019 9:49 AM
  • Hi Shiv,

    If you set the style display:none, we can't see the data in browser.

    And I can't see your code about how to bind the datetimepicker.

    I suggest you provide a simple example about how to reproduce this issue for further research.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Thursday, December 19, 2019 9:49 AM
    Moderator