locked
The input number is not being resized bootstrap html RRS feed

  • Question

  • User-1355965324 posted

    I am using html table inside a responsive-table div tag. There is numeric column with decimal numbers . But when I reduce the page size into smaller screen the some part of the numeric value is not visible. But when I drag into its original size can be visible. How can I make it visible all the values inside the table column in small screen as well as larger screen. Here is the code , Please help  with suggested code 

    <!doctype html>
    <html lang="en">
            <style>
                    table {
                        border-spacing: 10px 0;
                    }
                    th,
                    td {
                        text-align: center;
                        font: smaller;
                        border: 1px solid black;
                         
                        /*border-top: 1px solid #dddddd;
                        border-bottom: 1px solid #dddddd;*/
                        /*border-right: 1px solid #dddddd;*/
                    }
                    input[type=number]::-webkit-inner-spin-button,
                    input[type=number]::-webkit-outer-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }
                    div.showinline {
                        display: flex;
                        align-items: center;
                    }
                </style>
    
            <head>
                    <!-- Required meta tags -->
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                
                    <!-- Bootstrap CSS -->
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
                    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
                  
                
                    <title>Hello, world!</title>
            </head>
          
     <body>
           
            <h1>Hello, world!</h1>
            <div class="main-content">
    
                    <div class="table-responsive">
                            <table id="attendance" class=" table cell-border dataTable no-footer" style="width: 100%;" role="grid" aria-describedby="attendance_info">
                                <thead class="thead-light">
                                    <tr role="row">
                                        <td class="hidden" rowspan="1" colspan="1"></td>
                                        <td style="width:16.66%" rowspan="1" colspan="1">Employee</td>
                                        <td style="text-align:center;vertical-align:middle; " rowspan="1" colspan="1">Normal Attendance</td>
                                        <td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Scheduled DayOff</td>
                                        <td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Holiday</td>
                                        <td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">ShiftDay</td>
                                        <td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Other</td>
                                        <td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Sick</td>
                                        <td colspan="2" style="text-align:center;vertical-align:middle;" rowspan="1">Time off</td>
                                        <td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Extra Time</td>
                                        <td style="text-align:center;vertical-align:middle;width:250px" rowspan="1" colspan="1">Comment</td>
                                    </tr>
                                    <tr role="row">
                                        <td class="sorting_asc hidden" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column descending"
                                            style="width: 1px;"></td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label=": activate to sort column ascending"
                                            style="width: 61px;"></td>
                                        
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 72px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 66px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 47px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 55px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 59px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 39px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"
                                            style="width: 39px;">Time</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label="Salary Deduct: activate to sort column ascending"
                                            style="width: 45px;">Salary Deduct</td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label=": activate to sort column ascending"
                                            style="width: 32px;"></td>
                                        <td class="sorting" tabindex="0" aria-controls="attendance" rowspan="1" colspan="1" aria-label=": activate to sort column ascending"
                                            style="width: 62px;"></td>
                                    </tr>
                            
                                </thead>
                                <tbody>
                            
                            
                                    <tr style="background-color:#90EE90" role="row" class="odd">
                                        <td class="sorting_1 hidden">
                                            <input type="hidden" data-val="true" data-val-required="The LogID field is required." id="attendanceLogList_0__LogID" name="attendanceLogList[0].LogID"
                                                value="197211">
                                            <input type="hidden" data-val="true" data-val-required="The IsProtected field is required." id="attendanceLogList_0__IsProtected"
                                                name="attendanceLogList[0].IsProtected" value="True">
                                        </td>
                                        <td style="width:10%">Employee1</td>
                                        
                            
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" checked="checked" data-val="true" data-val-required="The IsNormalAttendance field is required."
                                                        id="attendanceLogList_0__IsNormalAttendance" name="attendanceLogList[0].IsNormalAttendance" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field NormalHrs must be a number."
                                                    data-val-required="The NormalHrs field is required." id="attendanceLogList_0__NormalHrs" name="attendanceLogList[0].NormalHrs"
                                                    value="3.00">
                                            </div>
                                        </td>
                            
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsDayOffMarked field is required."
                                                        id="attendanceLogList_0__IsDayOffMarked" name="attendanceLogList[0].IsDayOffMarked" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field DayOffHrs must be a number."
                                                    data-val-required="The DayOffHrs field is required." id="attendanceLogList_0__DayOffHrs" name="attendanceLogList[0].DayOffHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsHolidayMarked field is required."
                                                        id="attendanceLogList_0__IsHolidayMarked" name="attendanceLogList[0].IsHolidayMarked" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field HolidayHrs must be a number."
                                                    data-val-required="The HolidayHrs field is required." id="attendanceLogList_0__HolidayHrs" name="attendanceLogList[0].HolidayHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsFurlough field is required."
                                                        id="attendanceLogList_0__IsFurlough" name="attendanceLogList[0].IsFurlough" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field FurloughHrs must be a number."
                                                    data-val-required="The FurloughHrs field is required." id="attendanceLogList_0__FurloughHrs" name="attendanceLogList[0].FurloughHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsMaternityLeave field is required."
                                                        id="attendanceLogList_0__IsMaternityLeave" name="attendanceLogList[0].IsMaternityLeave" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field MaternityHrs must be a number."
                                                    data-val-required="The MaternityHrs field is required." id="attendanceLogList_0__MaternityHrs" name="attendanceLogList[0].MaternityHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" checked="checked" data-val="true" data-val-required="The IsSickMarked field is required."
                                                        id="attendanceLogList_0__IsSickMarked" name="attendanceLogList[0].IsSickMarked" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text"
                                                    data-val="true" data-val-number="The field SickHrs must be a number." data-val-required="The SickHrs field is required."
                                                    id="attendanceLogList_0__SickHrs" name="attendanceLogList[0].SickHrs" value="4.30">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsTimeOff field is required."
                                                        id="attendanceLogList_0__IsTimeOff" name="attendanceLogList[0].IsTimeOff" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field TimeOffHrs must be a number."
                                                    data-val-required="The TimeOffHrs field is required." id="attendanceLogList_0__TimeOffHrs" name="attendanceLogList[0].TimeOffHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text"
                                                data-val="true" data-val-number="The field ExtraTimeHrs must be a number." data-val-required="The ExtraTimeHrs field is required."
                                                id="attendanceLogList_0__ExtraTimeHrs" name="attendanceLogList[0].ExtraTimeHrs" value="0.00">
                                        </td>
                                        <td class="text">
                                            <input type="text" readonly="readonly" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control"
                                                id="attendanceLogList_0__Remark" name="attendanceLogList[0].Remark" value="ssdf">
                                        </td>
                            
                            
                                    </tr>
                                    <tr style="background-color:#FFBF00" role="row" class="even">
                                        <td class="sorting_1 hidden">
                                            <input type="hidden" data-val="true" data-val-required="The LogID field is required." id="attendanceLogList_1__LogID" name="attendanceLogList[1].LogID"
                                                value="0">
                                            <input type="hidden" data-val="true" data-val-required="The IsProtected field is required." id="attendanceLogList_1__IsProtected"
                                                name="attendanceLogList[1].IsProtected" value="False">
                                        </td>
                                        <td style="width:10%">Employee2</td>
                                        
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsNormalAttendance field is required."
                                                        id="attendanceLogList_1__IsNormalAttendance" name="attendanceLogList[1].IsNormalAttendance" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00"
                                                    class="form-control format-text" data-val="true" data-val-number="The field NormalHrs must be a number."
                                                    data-val-required="The NormalHrs field is required." id="attendanceLogList_1__NormalHrs" name="attendanceLogList[1].NormalHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                            
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsDayOffMarked field is required."
                                                        id="attendanceLogList_1__IsDayOffMarked" name="attendanceLogList[1].IsDayOffMarked" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00"
                                                    class="form-control format-text" data-val="true" data-val-number="The field DayOffHrs must be a number."
                                                    data-val-required="The DayOffHrs field is required." id="attendanceLogList_1__DayOffHrs" name="attendanceLogList[1].DayOffHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" data-val="true" data-val-required="The IsHolidayMarked field is required." id="attendanceLogList_1__IsHolidayMarked"
                                                        name="attendanceLogList[1].IsHolidayMarked" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text"
                                                    data-val="true" data-val-number="The field HolidayHrs must be a number." data-val-required="The HolidayHrs field is required."
                                                    id="attendanceLogList_1__HolidayHrs" name="attendanceLogList[1].HolidayHrs" value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" data-val="true" data-val-required="The IsFurlough field is required." id="attendanceLogList_1__IsFurlough"
                                                        name="attendanceLogList[1].IsFurlough" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text"
                                                    data-val="true" data-val-number="The field FurloughHrs must be a number." data-val-required="The FurloughHrs field is required."
                                                    id="attendanceLogList_1__FurloughHrs" name="attendanceLogList[1].FurloughHrs" value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" data-val="true" data-val-required="The IsMaternityLeave field is required." id="attendanceLogList_1__IsMaternityLeave"
                                                        name="attendanceLogList[1].IsMaternityLeave" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text"
                                                    data-val="true" data-val-number="The field MaternityHrs must be a number." data-val-required="The MaternityHrs field is required."
                                                    id="attendanceLogList_1__MaternityHrs" name="attendanceLogList[1].MaternityHrs" value="0.00">
                                            </div>
                                        </td>
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" data-val="true" data-val-required="The IsSickMarked field is required." id="attendanceLogList_1__IsSickMarked"
                                                        name="attendanceLogList[1].IsSickMarked" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text"
                                                    data-val="true" data-val-number="The field SickHrs must be a number." data-val-required="The SickHrs field is required."
                                                    id="attendanceLogList_1__SickHrs" name="attendanceLogList[1].SickHrs" value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" data-val="true" data-val-required="The IsTimeOff field is required." id="attendanceLogList_1__IsTimeOff"
                                                        name="attendanceLogList[1].IsTimeOff" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text"
                                                    data-val="true" data-val-number="The field TimeOffHrs must be a number." data-val-required="The TimeOffHrs field is required."
                                                    id="attendanceLogList_1__TimeOffHrs" name="attendanceLogList[1].TimeOffHrs" value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control format-text"
                                                data-val="true" data-val-number="The field ExtraTimeHrs must be a number." data-val-required="The ExtraTimeHrs field is required."
                                                id="attendanceLogList_1__ExtraTimeHrs" name="attendanceLogList[1].ExtraTimeHrs" value="0.00">
                                        </td>
                                        <td class="text">
                                            <input type="text" style="text-align:center;vertical-align:central;background-color:#FFBF00" class="form-control" id="attendanceLogList_1__Remark"
                                                name="attendanceLogList[1].Remark" value="">
                                        </td>
                            
                            
                                    </tr>
                                    <tr style="background-color:#90EE90" role="row" class="odd">
                                        <td class="sorting_1 hidden">
                                            <input type="hidden" data-val="true" data-val-required="The LogID field is required." id="attendanceLogList_2__LogID" name="attendanceLogList[2].LogID"
                                                value="197210">
                                            <input type="hidden" data-val="true" data-val-required="The IsProtected field is required." id="attendanceLogList_2__IsProtected"
                                                name="attendanceLogList[2].IsProtected" value="True">
                                        </td>
                                        <td style="width:10%">Employee3</td>
                                       
                            
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" checked="checked" data-val="true" data-val-required="The IsNormalAttendance field is required."
                                                        id="attendanceLogList_2__IsNormalAttendance" name="attendanceLogList[2].IsNormalAttendance" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field NormalHrs must be a number."
                                                    data-val-required="The NormalHrs field is required." id="attendanceLogList_2__NormalHrs" name="attendanceLogList[2].NormalHrs"
                                                    value="7.30">
                                            </div>
                                        </td>
                            
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsDayOffMarked field is required."
                                                        id="attendanceLogList_2__IsDayOffMarked" name="attendanceLogList[2].IsDayOffMarked" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field DayOffHrs must be a number."
                                                    data-val-required="The DayOffHrs field is required." id="attendanceLogList_2__DayOffHrs" name="attendanceLogList[2].DayOffHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsHolidayMarked field is required."
                                                        id="attendanceLogList_2__IsHolidayMarked" name="attendanceLogList[2].IsHolidayMarked" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field HolidayHrs must be a number."
                                                    data-val-required="The HolidayHrs field is required." id="attendanceLogList_2__HolidayHrs" name="attendanceLogList[2].HolidayHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsFurlough field is required."
                                                        id="attendanceLogList_2__IsFurlough" name="attendanceLogList[2].IsFurlough" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field FurloughHrs must be a number."
                                                    data-val-required="The FurloughHrs field is required." id="attendanceLogList_2__FurloughHrs" name="attendanceLogList[2].FurloughHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsMaternityLeave field is required."
                                                        id="attendanceLogList_2__IsMaternityLeave" name="attendanceLogList[2].IsMaternityLeave" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field MaternityHrs must be a number."
                                                    data-val-required="The MaternityHrs field is required." id="attendanceLogList_2__MaternityHrs" name="attendanceLogList[2].MaternityHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                            
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsSickMarked field is required."
                                                        id="attendanceLogList_2__IsSickMarked" name="attendanceLogList[2].IsSickMarked" value="true">
                                                </span>
                                                <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text"
                                                    data-val="true" data-val-number="The field SickHrs must be a number." data-val-required="The SickHrs field is required."
                                                    id="attendanceLogList_2__SickHrs" name="attendanceLogList[2].SickHrs" value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="showinline">
                                                <span>
                                                    <input type="checkbox" disabled="disabled" data-val="true" data-val-required="The IsTimeOff field is required."
                                                        id="attendanceLogList_2__IsTimeOff" name="attendanceLogList[2].IsTimeOff" value="true">
                                                </span>
                                                <input type="number" readonly="readonly" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90"
                                                    class="form-control format-text" data-val="true" data-val-number="The field TimeOffHrs must be a number."
                                                    data-val-required="The TimeOffHrs field is required." id="attendanceLogList_2__TimeOffHrs" name="attendanceLogList[2].TimeOffHrs"
                                                    value="0.00">
                                            </div>
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="number" placeholder="0.00" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control format-text"
                                                data-val="true" data-val-number="The field ExtraTimeHrs must be a number." data-val-required="The ExtraTimeHrs field is required."
                                                id="attendanceLogList_2__ExtraTimeHrs" name="attendanceLogList[2].ExtraTimeHrs" value="0.00">
                                        </td>
                                        <td class="text">
                                            <input type="text" readonly="readonly" style="text-align:center;vertical-align:central;background-color:#90EE90" class="form-control"
                                                id="attendanceLogList_2__Remark" name="attendanceLogList[2].Remark" value="">
                                        </td>
                            
                            
                                    </tr>
                                   
                                </tbody>
                            
                            </table>
                        </div>
                        
            </div>
    
    <!-- Optional JavaScript; choose one of the two! -->
    
        <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript">
            
            $('#attendance').DataTable();
            
        </script>
    
        <!-- Option 2: Separate Popper and Bootstrap JS -->
        <!--
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        -->
            
    </body>
    </html>

    Friday, May 21, 2021 8:17 AM

All replies

  • User-474980206 posted

    The table won’t fit on a small screen. You could put the table in a scrolling div, use a JavaScript table with scrolling support, or switch to a responsive grid.

    Friday, May 21, 2021 3:04 PM