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.
neoaguil17
In some screens I only see the 10% of "Fecha de recepcion" column and the calendar isn't complete.
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.
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.
Member
175 Points
619 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
2890 Points
924 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
55554 Points
14277 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.