We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >
I can not see a complete Datetimepicker in html table
2 replies
Last post Nov 06, 2019 03:22 PM by bruce (sqlwork.com)
Last post Nov 06, 2019 03:22 PM by bruce (sqlwork.com)
Member
177 Points
629 Posts
I can not see a complete Datetimepicker in html table
Nov 05, 2019 04:49 AM|neoaguil17|LINK
Hi
I have a boostrap table in which I included a Datetimepicker.
This is the html code:
<tbody data-bind="foreach: ListadoFacturacion, visible: ListadoFacturacion() && ListadoFacturacion().length > 0" style=""> <tr> <td data-bind="text: NombreProveedor">LUZ DEL SUR S.A. A.</td> <td data-bind="text: NombreEmpresa">CTM</td> <td data-bind="text: NombreTipoDocumento">Factura</td> <td data-bind="text: NumeroDocumento">e001-12345678</td> <td class="text-center" data-bind="text: FechaEmisionFormato">04/11/2019</td> <td data-bind="truncatedText: NumeroConformidadRecepcion, maxTextLength: 20, attr: { title: NumeroConformidadRecepcion }"></td> <td data-bind="text: NumeroOrdenCompa"></td> <th data-bind="text: EstadoFactura">Pendiente</th> <td class="text-center"> <bootstrap-datepicker params="enable: true, value: FechaRecepcionFormato"> <div data-bind="template: { afterRender: OnAfterRender }"> <div class="input-group date" data-bind="attr: { id: ControlId() }" id="29251e1b-0f15-43c9-b664-062e28348d8c"> <input type="text" class="form-control" data-bind="attr: { 'data-msg-required': RequiredMessage(), 'name': Name(), 'data-rule-required': Required() }" data-msg-required="" name="" data-rule-required="false"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div></bootstrap-datepicker> </td> <td data-bind="text: EsFB60Lectura">Sí</td> <td> <ul class="accion-icons"> <li> <button type="button" class="btn btn-default2 rb" title="Guardar" aria-label="Left Align" data-bind="click: $parent.GuardarFactura"> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Rechazar" aria-label="Left Align" data-bind="click: $parent.RechazarFactura"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Observar" aria-label="Left Align" data-bind="click: $parent.ObservarFactura"> <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Modificar Importe" aria-label="Left Align" data-bind="click: $parent.ModificarImporteFactura,visible: EsFB60() == false" style="display: none;"> <span class="glyphicon glyphicon-usd" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Ver bitácora" aria-label="Left Align" data-bind="click: $parent.VerBitacora"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Ver detalle" aria-label="Left Align" data-bind="click: $parent.VerFactura"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Editar" aria-label="Left Align" data-bind="click: $parent.EditarFactura"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> </li> </ul> </td> </tr> <tr> <td data-bind="text: NombreProveedor">LUZ DEL SUR S.A. A.</td> <td data-bind="text: NombreEmpresa">CTM</td> <td data-bind="text: NombreTipoDocumento">Nota de crédito</td> <td data-bind="text: NumeroDocumento">E007-32313113</td> <td class="text-center" data-bind="text: FechaEmisionFormato">12/11/2019</td> <td data-bind="truncatedText: NumeroConformidadRecepcion, maxTextLength: 20, attr: { title: NumeroConformidadRecepcion }"></td> <td data-bind="text: NumeroOrdenCompa">5820000343</td> <th data-bind="text: EstadoFactura">Pendiente</th> <td class="text-center"> <bootstrap-datepicker params="enable: true, value: FechaRecepcionFormato"> <div data-bind="template: { afterRender: OnAfterRender }"> <div class="input-group date" data-bind="attr: { id: ControlId() }" id="ff470afc-51dd-4295-ab89-ece389ed91b3"> <input type="text" class="form-control" data-bind="attr: { 'data-msg-required': RequiredMessage(), 'name': Name(), 'data-rule-required': Required() }" data-msg-required="" name="" data-rule-required="false"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div></bootstrap-datepicker> </td> <td data-bind="text: EsFB60Lectura">No</td> <td> <ul class="accion-icons"> <li> <button type="button" class="btn btn-default2 rb" title="Guardar" aria-label="Left Align" data-bind="click: $parent.GuardarFactura"> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Rechazar" aria-label="Left Align" data-bind="click: $parent.RechazarFactura"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Observar" aria-label="Left Align" data-bind="click: $parent.ObservarFactura"> <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Modificar Importe" aria-label="Left Align" data-bind="click: $parent.ModificarImporteFactura,visible: EsFB60() == false"> <span class="glyphicon glyphicon-usd" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Ver bitácora" aria-label="Left Align" data-bind="click: $parent.VerBitacora"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Ver detalle" aria-label="Left Align" data-bind="click: $parent.VerFactura"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> </button> </li> <li> <button type="button" class="btn btn-default2 rb" title="Editar" aria-label="Left Align" data-bind="click: $parent.EditarFactura"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> </li> </ul> </td> </tr> </tbody>The code of the date with problems i:
<div data-bind="template: { afterRender: OnAfterRender }"> <div class='input-group date' data-bind="attr: { id: ControlId() }"> <input type='text' class="form-control" data-bind="attr: { 'data-msg-required': RequiredMessage(), 'name': Name(), 'data-rule-required': Required() }" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div>Contributor
3140 Points
983 Posts
Re: I can not see a complete Datetimepicker in html table
Nov 05, 2019 05:23 AM|Yang Shen|LINK
Hi neoaguil17,
The community will need enough information to reproduce the problem which includes the complete html code, all js and css file references and all js and css code in current page.
So this issue happens sometimes not always? and in some specific situations?
Or you can try to add a fixed inline width to the column of your datepicker.
Best Regard,
Yang Shen
All-Star
58474 Points
15789 Posts
Re: I can not see a complete Datetimepicker in html table
Nov 06, 2019 03:22 PM|bruce (sqlwork.com)|LINK
You should make the table responsive, so that it fits the screen. This may also require making its parent responsive. You browser debug tools to determine why thetable is wider than the screen. Maybe the columns are a fixed size, maybe no table width is set.