Android Scroll Webview Editrable to cursor - soft keyboard

Question

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.

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

So you say you tried it and it worked but the try project doesn't contain any text? — Steven, Sep 14 '17 at 06:56
So sorry yes it contains 3 paragraphs of text so that it scrolls just fine. However if I scroll down and then tap on the text to edit, the soft keyboard shows over top of the webview. Its like its not getting resized and the cursor is not moving the text to just above the softkeypad (something thought that autopan or resize would do but its not). — justdan0227, Sep 14 '17 at 12:49
Do you have a width for your .messageBody? Did you tried to get other css styles then -webkit- that do the same? Because some css styles do not work in android webview — Steven, Sep 14 '17 at 13:04
What this really comes down to is that I need to resize the webview when the softkeyboard is shown because the legacy app for some reason is not doing just that. — justdan0227, Sep 15 '17 at 14:51
Can you provide me a screenshot of the problem. So I can visualize it? — Steven, Sep 15 '17 at 14:53
@Steven should the "parent" adjustPan not be handling this resize of the webview. Thoughts as to what would be potentially blocking that resize that I could search for? Again not sure why in the sample app I built it works with adjustPan but if I don't i get the cursor caret over the top of the keyboard as in the image — justdan0227, Sep 18 '17 at 14:14
sorry for my late answer. One question do use JS to go to the place where you cursor is? — Steven, Sep 18 '17 at 14:21
@Steven not in the sample app. It should just resize the web view but not seeing that it does. You can't scroll when the keyboard is shown. Its like the view behind the keyboard is not resizing — justdan0227, Sep 18 '17 at 19:37
I have an idea you could hide the softkeyboard and show it back if you are scrolled to the right place. So the scrolling to the cursor is that JS or CSS? — Steven, Sep 19 '17 at 07:16
So if you click on the last word in the webview, assume that its larger than the visible height, and as soon as you click, the softkeyboard appears, the caret is where it should be if the softkeyboard did not appears, but as it appears, the webview does not readjust and remains the same size and the soft keyboard is placed over top of it with the caret showing on top of the keyboard as in the image above. I'm familiar in ios how to get notified that the keyboard is showing and can manually readjust the view under it which is what I think I need to do here, but can't find the right coe. — justdan0227, Sep 19 '17 at 14:26
I don't have any experience with IOS. But I know it's possible to hide the softkeyboard and only let it pop-up again when your scroll height is that right place so you can see the cursor — Steven, Sep 19 '17 at 14:29
@Steven I placed the example app out on GitHub https://github.com/justdan0227/MyBootStrapExample.git — justdan0227, Sep 20 '17 at 12:55
Sorry I haven't really got the time to look at it. I have changed a few things and it works. I think that is what you want — Steven, Sep 28 '17 at 13:37
Trying it out today. your example works perfectly. Now trying to make it work in this legacy code. Will let you know. Thanks! — justdan0227, Oct 09 '17 at 12:42
Thanks for letting me know then! I hope it works otherwise we will find a solution. — Steven, Oct 09 '17 at 13:13

score 1 · Answer 1 · answered Sep 28 '17 at 14:05

1

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

answered Sep 28 '17 at 14:05

Steven

1,404
2
16
39

So the solution you gave me does work for the sample, however it still does not resize the webview message-body in our legacy code. I think it may have to do with the fact that we are using fragments and then replace the cotent-area of the xml file with a composition.html file that has the message-body as described above. I think Android is not notifying the webview fragment that the keyboard is shown so it can resize the webview window to only be 5 or 6 lines and then scroll as you type. Not sure where to go from here.. – justdan0227 Oct 12 '17 at 21:17
So what you mean is that code doesn't work in your app where you need it? I don't really understand what you mean with resize the webview window? – Steven Oct 13 '17 at 09:42
So sorry for the confusion. The view is a "simple" reply window in which we have the "TO, SUBJECT" at the top followed by a webview which the text is rendered and takes up the remaining 2/3 of the screen. If the keyboard is then opened (as the webview is just an editable message-body), the softkeyboard overlays the webview and the webview does not scroll, nor does it snap to the cursor if you click on the lower part of the text that also brings up the keyboard, thus hiding the cursor. – justdan0227 Oct 13 '17 at 15:53
So if I understand it correctly it doesn't work in your webview because your screen is only 2/3 webview. So your softkeyboard is on top of whole your webview? – Steven Oct 16 '17 at 16:02
correct. In which I would expect the webview to "resize" and allow scrolling along with positioning the cursor to where the user clicked before the softkeyboard was displayed. Again remember all we have in that webview fragment is a bootstrap message-body that is editable. – justdan0227 Oct 16 '17 at 16:11
@justdan0227 is it possible to create a Gitrepo for that? So I can try it out? I maybe have an idea but I don't know if that is the problem – Steven Oct 16 '17 at 16:16
let me see what I can do. Its part of a large project of which I can't repo it but let me try and get creative – justdan0227 Oct 16 '17 at 19:53
@justdan0227 I understand that. I really want to help you and if find it also really interesting why it doesn't work. Let me know if you have something. – Steven Oct 16 '17 at 19:54
thanks.. I just have to get creative on how to isolate this and not post the entire app. I've added a screen shot of the actual error. – justdan0227 Oct 16 '17 at 20:08
Does the screenshot has to do with this thread? https://stackoverflow.com/questions/46671454/android-webview-responsive-youtube-not-playing because you have YT video in it – Steven Oct 17 '17 at 07:19
Nope, my bad.. thank you. that was in another issue I'm having. removing the image – justdan0227 Oct 17 '17 at 14:04
@justdan0227 Did you find something? – Steven Oct 30 '17 at 10:45
unfortunately no.. Trying to come up with a sample that is true to the Fragment that we have that I can post as I can't post the entire project. – justdan0227 Oct 30 '17 at 14:45
Yes can you post that Fragment? – Steven Oct 30 '17 at 14:55
That's what I'm trying to come up with one that is detached from our legacy code. :) – justdan0227 Oct 30 '17 at 18:15
So still trying to come up with a snippet for you to try, however I think it comes down to the fact that the xml for the layout has that section of the screen as a – justdan0227 Oct 30 '17 at 21:24

Android Scroll Webview Editrable to cursor - soft keyboard

1 Answers1