1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Scroll da WebView não funciona

Fiz um single view application com AngularJS e quero apresenta-lo através de uma WebView do Android, porém quando mostro uma lista maior que o tamanho do display, não consigo fazer o scroll.

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="${packageName}.${activityClass}" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="vertical" />

</LinearLayout>

java

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);

        webview = (WebView) findViewById(R.id.webView1);
        final ProgressDialog pd = ProgressDialog.show(this, "", "Carregando...", true);
        pd.setCancelable(true);

        webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                if (pd.isShowing() && pd != null) {
                    pd.dismiss();
                }
                webview.pageDown(true);
            }

            @Override
            public void onReceivedError(WebView view, int errorCode,
                    String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                onNotFoundURL();
            }
        });

        webview.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
        webview.setVerticalScrollBarEnabled(true);
        webview.setScrollbarFadingEnabled(true);
        webview.setVerticalScrollbarOverlay(true);

        webview.getSettings().setBuiltInZoomControls(true);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.getSettings().setSaveFormData(false);
        webview.loadUrl("meu-app");
    }

O html com Angular esta assim:

Aqui é onde as views são renderizadas

<section id="conteudo" ng-view></section>
<article id="mensal">

    <!-- Aqui os itens começam a ser renderizados caso tenha valor na variavel relatorio -->
    <div id="listaRelatorio" ng-show="relatorio != null">
        <div ng-repeat="mes in relatorio.meses">
        <h1 class="titulo">{{mes.mes}}</h1>

            <table 
                cellspacing="0"
                class="relatorio_1">
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>Quantidade</th>
                    <tr>
                </thead>
                <tbody>
                    <tr ng-click="toogleCancelados($index)">
                        <td>{{mes.status.cancelado.descricao}}</td>
                        <td>{{mes.status.cancelado.quantidade}}</td>
                    </tr>
                    <tr 
                        ng-show="mes.toogle == true"
                        ng-repeat="linha in mes.status.motivoCancelado"
                        class="subRelatorio_1"
                        ng-click="showIdsCancelamento(linha.ids)">
                        <td>{{linha.descricao}}</td>
                        <td>{{linha.quantidade}}</td>
                    </tr>
                    <tr class="stripe">
                        <td>{{mes.status.fechado.descricao}}</td>
                        <td>{{mes.status.fechado.quantidade}}</td>
                    </tr>
                    <tr>
                        <td>{{mes.status.orientacao.descricao}}</td>
                        <td>{{mes.status.orientacao.quantidade}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h1 class="titulo">M&ecirc;s vigente</h1>
        <table 
            cellspacing="0"
            class="relatorio_1" >
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Quantidade</th>
                <tr>
            </thead>
            <tbody>
                <tbody>
                <tr ng-click="toogleCancelados(relatorio.meses.length)">
                    <td>{{relatorio.mesAtual.status.cancelado.descricao}}</td>
                    <td>{{relatorio.mesAtual.status.cancelado.quantidade}}</td>
                </tr>

                <tr 
                    ng-show="relatorio.mesAtual.toogle == true"
                    ng-repeat="linha in relatorio.mesAtual.status.motivoCancelado"
                    class="subRelatorio_1"
                    ng-click="showIdsCancelamento(linha.ids)">
                    <td>{{linha.descricao}}</td>
                    <td>{{linha.quantidade}}</td>
                </tr>
                <tr class="stripe">
                    <td>{{relatorio.mesAtual.status.fechado.descricao}}</td>
                    <td>{{relatorio.mesAtual.status.fechado.quantidade}}</td>
                </tr>
                <tr>
                    <td>{{relatorio.mesAtual.status.orientacao.descricao}}</td>
                    <td>{{relatorio.mesAtual.status.orientacao.quantidade}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</article>

Eu suspeito que o problema seja a renderização dinâmica da lista que faz com q o webView não reconheça o height do conteúdo após a renderização.

Porém o <body> esta com overflow: hidden e o <section id="conteudo" ng-view></section> esta com overflow: auto

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags android web xml javascript java ou faça a sua própria pergunta.