justdan0227
justdan0227

Reputation: 1362

Android Scroll Webview Editrable to cursor - soft keyboard

I have a piece of inherited code that I can not for the life of me figure out how to go about debugging this issue.

I have a Linear Layout with a webview in it. Inside the webview is a div that is set to:

style="overflow-y: scroll; -webkit-overflow-scrolling:touch" contenteditable="true".  

However, if the text in the WebView is the full height of the screen, when I tap on the bottom of the text, the keyboard shows yet the view does not scroll to the cursor point. In fact, the cursor icon shows up over the top of the softkeybaord.

Now if I try this is a sample app with the same div tags it works just fine. I can not figure out why the legacy code is not scrolling. Neither of them have a scrollview wrapped around them and yet the stand along simple app with the webview works just fine.

The class for the div is:

.messageBody {
        word-wrap: break-word;
        -webkit-nbsp-mode: space;
        -webkit-line-break: after-white-space;
        height: 100%;
        min-height: 200px;
        }

UPDATE: so if I have

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity"
        android:configChanges="orientation|screenSize|keyboard|keyboardHidden"
        android:windowSoftInputMode="adjustPan">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

it appears that the "android:windowSoftInputMode="adjustPan" is causing the keyboard to overlay the webview and the cursor gets placed on top of the softkeyboard. If I take adjustPan out it appears to work. However in the legacy code this does not appear to make a difference and so I'm trying to understand how to see what all the attributes are in the legacy code in order to compare it to this sample app that I can recreate the error in.

UPDATE IMAGES

Webview, place pointer over one of the words in the last lines of the text and watch the softkeyboard open and cursor caret is on top of keyboard, view not scrolled. Image Before Click

<FrameLayout
            android:id="@+id/composer_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:windowSoftInputMode="adjustPan"/>

Upvotes: 1

Views: 1455

Answers (1)

Steven
Steven

Reputation: 1414

  • I have changed the minSDKversion because I couldn't tried it on my device.

  • I have changed the CDN to local loading because sometimes the CDN
    doesn't load in webview.

  • I have changed the orientation to portrait.

  • I have commented your android configurations.

  • I de commented the container of your the bootstrap class. I have
    placed the css and the js in a separate file.

  • I have changed the location of your scripts in the html because the
    js files load faster when you place them after the body tag.

I have created this repo with the changes: https://github.com/Steven0213/bootstrapExample

Let me know if you need more improvement or it isn't correct

Upvotes: 1

Related Questions