locked
I can not see a complete Datetimepicker in html table RRS feed

  • Question

  • User-1350042179 posted

    Hi

    I have a boostrap table in which I included a Datetimepicker.

    In some screens I only see the 10% of "Fecha de recepcion" column and the calendar isn't complete.

    How can I fix the problem?

    This is the html code:

    <tbody data-bind="foreach: ListadoFacturacion, visible: ListadoFacturacion() &amp;&amp; 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>

    Tuesday, November 5, 2019 4:49 AM

All replies

  • User-719153870 posted

    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.

    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.

    Best Regard,

    Yang Shen

    Tuesday, November 5, 2019 5:23 AM
  • User-474980206 posted

    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.

    Wednesday, November 6, 2019 3:22 PM