I'm using react-native-pell-rich-editor which is built upon the WebView component. As soon as I get to the bottom of the visible WebView (after typing about 20 lines) the text that I'm typing into the RichEditor is appearing below the visible area - so the text is being input, but I just can't see it! I have to scroll down every new line to see what I'm typing.
The KeyboardAvoidingView is pushing up my RichEditor (WebView) when the RichEditor is focused.
Is there a way to auto scroll down to where the cursor is when typing? Perhaps there is a better solution?
<ScrollView>
<KeyboardAvoidingView behavior={'padding'}>
<RichToolbar
actions={[ actions.keyboard, actions.setBold, actions.setItalic, actions.setUnderline, actions.setStrikethrough, actions.blockquote, actions.code, actions.alignCenter, actions.alignLeft, actions.alignRight ]}
editor={that.richText}/>
<RichEditor
initialContentHTML={messageBody}
initialFocus={true}
placeholder={'Compose email'}
ref={that.richText}/>
</KeyboardAvoidingView>
</ScrollView>
There are two parts to the way I solved this problem. I did not use KeyboardAvoidingView.
I also placed the RichEditor inside of a ScrollView, but called the ScrollView.scrollToEnd() method after the editor is initialized so that the cursor would be above the keyboard. This happens after a short timeout after calling RichEditor.focusContentEditor in editorInitializedCallback. Note: doing it this way means you do not need to use the initialFocus prop.
For moving the position while the user is typing, call ScrollView.scrollTo() in the ScrollView's onContentSizeChanged prop. You can use the dimension values that are passed to this prop's function to calculate how many pixels to scroll based on the previous dimensions and scroll position stored in the component state.
Related
Initially I want to show a composable immediately on top of the Android default keyboard, what slides in if needed on my different screens. Similar like in this example, but I do not want to set WindowCompat.setDecorFitsSystemWindows(window, false), which would be required for this solution.
Therefore, I've set in the manifestv for that Activity:
android:windowSoftInputMode="adjustResize"
And aligned stuff I want to display immediately on top of the keyboard to Alignment.Bottom.
For the very same activity, I also have a use case, where the keyboard slides in, but I do not want to align it on top of the keyboard. it shall remain on the the same position as it was without keyboard.
Can I selectively tell a composable to ignore android:windowSoftInputMode="adjustResize", which was already set for the whole Activity?
I want to create a View very similar To the iOS notes application. The main function is to allow the user to get a check box in front of a line of Text.
My first attempt is this:
I have a UITextView where i try to insert buttons on the left side of the View, the Problem is i dont get the right y Position for each line and the whole text is offsetted even if there is no Button in Front of the line.
Question:
Is there a better approach, maybe much simpler or even built in functionality in UITextView i couldn‘t find?
If not, how do i get the exact y position of the line the cursor is currently in, so i can set the Buttons in the correct positions?
I was wondering if there is a way to set prompt text location in TextArea.
Basically I am trying to create the similar effect as ListView Placeholder does. It is just to keep consistency in UI, so that everything mostly would look similar.
Any suggestions with this.
I think you can only do this by a dirty hack:
Set alignment to center.
Depending on your desired behavior either add a focus listener which sets the alignment to left again when focused and back to center when focus left.
text.focusedProperty().addListener((p,o,n)->{
if(n){
text.setAlignment(Pos.CENTER_LEFT);
}else {
text.setAlignment(Pos.CENTER);
}
});
Or add a keylistener to get the left aligned text while typing(and a focus-left listener to reset it if needed, eg. empty)
setOnKeyPressed(e->text.setAlignment(Pos.CENTER_LEFT));
I am trying to automate an ios native app using Frank page which has a lot of text field. But i am not able to find a step which auto scroll the page under view until the element is find.
If the element is outside the view, frank is not able to fill that field. Can anybody please help?
It's simple, when a text field becomes active, create a method with as a parameter the sender (a UITextField *), and scroll to its position through the frame property.
I am trying to add a horizontal toolbar at he top of my application (uses android webview and jquery mobile) that contains a bunch of buttons (too many to fit across the screen in a single line).
The problem that I am facing is that instead of hiding the extra buttons, they wrap around to the next line. What I would like is for them to hide and be accessible by scrolling them horizontally just like a native ListView would allow me to do.
I have tried to use a ListView to put the buttons in, and pass the button presses to the javascript code by doing loadUrl(), but this causes other issues and is not usable in my case (it automatically hides the soft keyboard).
I have tried the following code (along with this code wrapped in a jquery mobile toolbar):
<ul data-role="controlgroup" data-type="horizontal">
<li>B</li>
<li>I</li>
<li>U</li>
<li>S</li>
<li>ol</li>
<li>ul</li>
<li>in</li>
<li>out</li>
<li>sub</li>
<li>sup</li></ul>
But this just wraps around to the next line.
Try putting the ul in a div, and set the div's width property to a large value, enough to accomodate all the buttons. Then set the overflow property to auto, and you should be good to go.