Navigate horizontal scroll by pressing tab

Asked

Viewed 487 times

11

I’m using the plugin datatables. I built a table where the first four columns are fixed and the others (which will be generated "dynamically") have input for quantity typing.

My intention is that when the user presses tab to go to the next input, the horizontal scroll currently accompanies (with the exception of IE) the input wins Focus but as the scroll does not move, it stays there hidden in the overflow.

Follows picture of how my table is

inserir a descrição da imagem aqui

How can I get the desired effect to work (mainly) in Chrome ?

My HTML structure:

<div id="novoPedidoTabelaA_wrapper" class="dataTables_wrapper form-inline no-footer">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="DTFC_ScrollWrapper" style="position: relative; clear: both; height: 182px;">
        <div class="DTFC_RightWrapper" style="position: absolute; top: 0; left: 0;">
            <div class="DTFC_RightHeadWrapper" style="position: relative; top: 0; left: 0;">
                <div class="DTFC_RightHeadBlocker DTFC_Blocker" style="position: absolute; top: 0; bottom: 0;"></div>
            </div>
            <div class="DTFC_RightBodyWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;">
                <div class="DTFC_RightBodyLiner" style="position: relative; top: 0; left: 0; overflow-y: scroll;"></div>
            </div>
            <div class="DTFC_RightFootWrapper" style="position: relative; top: 0; left: 0;">
                <div class="DTFC_RightFootBlocker DTFC_Blocker" style="position: absolute; top: 0; bottom: 0;"></div>
            </div>
        </div>
        <div class="dataTables_scroll">
            <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
                <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 3316px; padding-right: 0px;">
                    <table style="min-height: 100px !important; margin-left: 0px; width: 3316px;" class="table table-striped table-bordered top dataTable no-footer" cellspacing="0" width="100%" role="grid">
                        <thead>
                            <tr role="row" style="height: 56px;">
                                <th style="width: 307px !important; min-width: 357px !important;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1">Produto</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">Embalagem</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 113px;">Solicitado (QTD)</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 102px;">Digitado (QTD)</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 06/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 07/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 07/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 08/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 08/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 09/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 09/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 10/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 10/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 11/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 11/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 12/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 12/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 01/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 01/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 02/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 02/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 03/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 03/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 04/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 04/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 05/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 05/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 06/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 06/2016</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="dataTables_scrollBody" style="overflow: auto; width: 100%;">
                <table id="novoPedidoTabelaA" style="min-height: 100px !important; width: 3315px;" class="table table-striped table-bordered top dataTable no-footer" cellspacing="0" role="grid" aria-describedby="novoPedidoTabelaA_info">
                    <thead>
                        <tr role="row" style="height: 0px;">
                            <th style="width: 300px !important; min-width: 300px !important; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Produto</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Embalagem</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 113px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Solicitado (QTD)</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 102px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Digitado (QTD)</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 06/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 07/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 07/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 08/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 08/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 09/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 09/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 10/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 10/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 11/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 11/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 12/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 12/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 01/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 01/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 02/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 02/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 03/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 03/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 04/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 04/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 05/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 05/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 06/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 06/2016</div>
                            </th>
                        </tr>
                    </thead>


                    <tbody>




                        <tr class="ListaProdutos odd" data-identificador="198" data-solicitado="12" data-nome="2,4-D 806 12X1 L" style="cursor: pointer; height: 99px;" role="row">
                            <td class="itemEnviado">
                                <h5 class="ProdutoDescricao" data-produtodescid="198" style="min-width: 299px !important;">2,4-D 806 12X1 L (DQDA.806.003)</h5>
                            </td>
                            <td class="itemEnviado">12</td>
                            <td class="itemEnviado">12</td>
                            <td class="QTDDigitadoProduto itemEnviado" data-iditem="198">12</td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-6-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-7-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-7-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-8-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-8-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-9-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-9-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-10-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-10-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-11-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-11-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-12-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-12-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-1-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-1-28" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-2-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-2-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-3-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-3-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-4-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-4-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-5-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-5-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-6-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-6-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="DTFC_LeftWrapper" style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1px;">
            <div class="DTFC_LeftHeadWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;">
                <table style="min-height: 100px !important; margin-left: 0px; width: 100%;" class="table table-striped table-bordered top dataTable no-footer DTFC_Cloned" cellspacing="0" width="100%" role="grid">
                    <thead>
                        <tr role="row" style="height: 56px;">
                            <th style="width: 300px !important; min-width: 300px !important;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1">Produto</th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">Embalagem</th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">Solicitado (QTD)</th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 91px;">Digitado (QTD)</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="DTFC_LeftBodyWrapper" style="position: relative; top: 0px; left: 0px; overflow: hidden; height: 101px;">
                <div class="DTFC_LeftBodyLiner" style="position: relative; top: 0px; left: 0px; overflow-y: hidden; margin-top: -6px; width: 657px; height: 101px;">
                    <table style="min-height: 100px !important; width: 100%; padding: 0px; margin: 0px;" class="table table-striped table-bordered top dataTable no-footer DTFC_Cloned" cellspacing="0" role="grid" aria-describedby="novoPedidoTabelaA_info">
                        <thead>
                            <tr role="row" style="height: 0px;">
                                <th style="width: 300px !important; min-width: 300px !important; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1"></th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"></th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"></th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 91px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"></th>
                            </tr>
                        </thead>


                        <tbody>
                            <tr class="ListaProdutos odd" data-identificador="198" data-solicitado="12" data-nome="2,4-D 806 12X1 L" style="cursor: pointer; height: 99px;" role="row">
                                <td class="itemEnviado">
                                    <h5 class="ProdutoDescricao" data-produtodescid="198">2,4-D 806 12X1 L (DQDA.806.003)</h5>
                                </td>
                                <td class="itemEnviado">12</td>
                                <td class="itemEnviado">12</td>
                                <td class="QTDDigitadoProduto itemEnviado" data-iditem="198">12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="DTFC_LeftFootWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="dataTables_info" id="novoPedidoTabelaA_info" role="status" aria-live="polite">Mostrando de 1 a 1 de 1 registros</div>
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>
jquery css google-chrome internet-explorer
  • 1

    How are you fixing the columns?

  • 2

    i did a local test and could not play the problem in Chrome, you can create a snippet or fiddle?

  • Good evening Rafael, the problem in Chrome occurs in which window resolution? Is there a possibility that you have mixed two Avascripts, could help?

  • 100% zoom in window maximized in 1366 x 768 resolution. I find it unlikely.

  • @Guilhermenascimento In Chrome what happens is the following, it only gives the horizontal scroll when I enter with some value in the input. For example, the inputs are visible from 1 to 5, when I give tab pro 6 and type something, it scroll.. So on

  • @Rafaelbarbosa tonight I’ll try to fix this.

  • @Guilhermenascimento Apparently, it only navigates by inputs without values. If the input has value, this works in the logic I passed above. View this from your Jsfiddle

Show 2 more comments

3 answers

6

I took advantage of @Guilherme Nascimento’s reply and made some modifications.

Using jquery 1.11.1, it worked on IE 9.

Example below works for any type of column width and works at the end of scroll:

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

		<script>
		$(document).ready(function(){
			var fields = $("input[type=text]", $('#my_table'));
			fields.focus(function() {
				var my_target = $(this);
				var dist = my_target.offset().left + $('#my_table').scrollLeft() - 10;
				$('#my_table').stop().animate(
					{ 'scrollLeft' : dist },
					200,
					'swing'
				);
			});
		});
		</script>
	</head>
	<body>
		<div id="my_table" style="overflow-x: scroll; width: 50%;">
		<table>
			<tr>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
			</tr>
		</table>
		</div>
	</body>
</html>

The idea is you put id="my_table" in div which contains the table with scroll. In this table you can add cells/rows/columns dynamically at will. The code will work.

  • I updated with my HTML structure that is generated because of the Datatables column fixing. In this structure I still have the same error

  • It’s a little hard to understand your code, because I don’t know how you formatted the table. However I suggest you do the following: add to the class dataTables_scroll this parameter: overflow-x: scroll;. This can influence the class dataTables_scrollHead, then make sure this has overflow-x: hidden;. Done so, in the div that you put dataTables_scroll, add this id: id="my_table". Then use the javascript code of my reply.

  • The idea is you put id="my_table" in div which contains the table with scroll. In this table you can add cells/rows/columns dynamically at will. The code will work.

4

I don’t know what version of Internet Explorer, but many problems are caused due to Chircksmode, to help avoid problems of this type recommend using this meta-tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

However the problem may be with the datatables as you mentioned, I don’t have the HTML structure of your code (the inputs and classes used in them, so I’ll post a generic example and you can adapt it).

First I think instead of overflow-x: hidden; you should use overflow-y: hidden;, because you want a scroll horizontal and not vertical, am I right? (although the script I posted will work in both cases).

As the problem only occurs in the Internetexplorer you can use if ($.browser.msie) { to avoid applying the effect on other browsers.

$(function() {
        var tabela = $("#Tabela");
        var fields = $("input[type=text]", tabela);

        fields.focus(function () {
            var $this = $(this);

            var fieldX  = $this.offset().left;
            var tableX  = tabela.offset().left;
            var scrollX = tabela.scrollLeft();
            var tdWidth = Math.round($this.parent().width() / 2);

            setTimeout(function() {
                //Delay para previnir o scroll automatico do navegador atrapalhar o $.animate
                tabela.stop().animate({
                    "scrollLeft": fieldX - tableX + scrollX - tdWidth
                }, 200);
            }, 10);
        });
});
#Tabela {
    overflow: scroll;
    overflow-y: hidden;
    display: block;
    white-space: nowrap;
    border: 1px #ccc solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<div id="Tabela">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>Coluna 1</th>
                <th>Coluna 2</th>
                <th>Coluna 3</th>
                <th>Coluna 4</th>
                <th>Coluna 5</th>
                <th>Coluna 6</th>
                <th>Coluna 7</th>
                <th>Coluna 8</th>
                <th>Coluna 9</th>
                <th>Coluna 10</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
        </tbody>
    </table>
</div>

Problem with custom table

Your problem here is not with the table, the problem is that you created two, one is displayed 50% and is superimposed, and the other (where the inputs are) occupies "100%", but is below the first mentioned. In other words, it works perfectly, the problem is that some inputs will always stay below the overlapping table. So the problem is not with the table, but with a specific thing that you created. Your code has numerous inline styles in addition to several items that don’t seem to be needed, but I’ll try to repurpose the code, see if it works.

The element that seems to use the scroll is the dataTables_scrollBody then the selector should be something like .dataTables_scrollBody. Since the first TD to have input in your table is the fifth, then you will have to use this selector td.itemEnviado:nth-child(5) input.data (change to add more Tds). The js code should look like this, it will take the table scroll back left:

<script type="text/javascript">
$(function() {
    $("td.itemEnviado:nth-child(5) input.data").focus(function() {
        $(".dataTables_scrollBody").scrollLeft(0);
    });
});
</script>

If you want to use an animated effect:

<script type="text/javascript">
$(function() {
    $("td.itemEnviado:nth-child(5) input.data").focus(function() {
        $(".dataTables_scrollBody").animate({
              "scrollLeft": 0
        });
    });
});
</script>

Example in jsfiddle: http://jsfiddle.net/krph0dh0/embedded/

  • http://answall.com/questions/72630/navegar-tab-input-com-valores

1


How scroll only navigates on input worthless, I resolved as follows:

 $('input').focus(function () {
    var val = "";
    var attr = $(this).attr('placeholder');
    if (typeof attr !== typeof undefined && attr !== false) {
       val = $(this).attr("placeholder")
    } else {
       val = $(this).val();
    }
    $(this).val('');
    $(this).attr("placeholder", val);
 });

  $('.data').blur(function () {
        $('.data').each(function () {
            var attr = $(this).attr('placeholder');
            if ($(this).val() == "") {
                if (typeof attr !== typeof undefined && attr !== false) {
                    $(this).val($(this).attr("placeholder"));
                } else {
                    $(this).val(0);
                }
            } else {
                $(this).attr('placeholder', $(this).val());
            }
        });
});

The logic is quite simple. No focus attribute a null value to the input and store the old value in a placeholder.

In the blur I see if there was a value entry, if yes, I assign that new value to the placeholder.

So the input will be empty every time you press tab

Also, I used one of the function that Guilherme Nascimento passed. I only made a small change.

$(function() {
    $("td:nth-child(5) input.data").focus(function() {
        $(".dataTables_scrollBody").animate({
              "scrollLeft": 0
        });
    });
});

Browser other questions tagged jquery css google-chrome internet-explorer

You are not signed in. Login or sign up in order to post.