I have a custom Dialog as shown below:
When I click on the Edit Text, The dialog is shifted upwards but half of the dialog becomes invisible as shown below:
I verified the issue on Android ICS and Gingerbread but it doesn't happen on Android Lollipop.
I appreciate your help for figuring out why.
Here is the custom dialog layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutChatInGame"
android:layout_width="305dp"
android:layout_height="190dp"
android:background="#drawable/dialog_table_border"
android:orientation="vertical"
android:visibility="visible">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/roomlist_title_background">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_margin="5dp"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Game is on hold because the host paused the app"
android:id="#+id/lblOnHoldDialogMessage"
android:textColor="#color/progress_dialog_on_hold_text"
android:textSize="18dp"
android:singleLine="false"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/lblChatHistoryGameOnHold"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="bottom"
android:maxLines="5"
android:scrollbars="vertical"
android:textColor="#color/edit_text_general_text"
android:textColorHint="#color/edit_text_general_hint"
android:paddingRight="2dp"
android:paddingLeft="2dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/textChatGameOnHold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginStart="2dp"
android:layout_weight="1"
android:ems="10"
android:hint="#string/edit_text_send_chat_message"
android:imeOptions="flagNoExtractUi|actionDone"
android:inputType="text"
android:maxLength="100"
android:maxLines="1"
android:textColor="#color/edit_text_general_text"
android:textColorHint="#color/edit_text_general_hint"/>
<Button
android:id="#+id/btnSendGameOnHold"
style="#style/lightboxButton.Blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendChatMessageInGame"
android:text="#string/btn_send"/>
</LinearLayout>
</LinearLayout>
Try to use also android:imeOptions="flagNoFullscreen" in your .xml. Recommend you to make some tests, using it with and without flagNoExtractUi. Please give me some feedback.
If all the other solutions are not working then try adding marginBottom in the top layout:
LinearLayout android:layout_marginBottom=20dp
You can get the desired behavior by making adjustResize flag for the windowSoftInputMode of the dialog in the manifest if your dialog is declared as an activity.
Like This:
android:windowSoftInputMode="adjustResize|stateHidden"
You can also directly try something like this directly on the dialog:
alertDialog.getWindow().setSoftInputMode(
WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
Related
This is my custom alert dialog code -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/inset_background_dialog"
android:padding="#dimen/dialog_elements_margin">
<TextView
android:id="#+id/text_add_address_title_addnewaddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/add_new_address_title_addnewaddress"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<ImageView
android:id="#+id/image_close_dialogue_addnewaddress"
android:layout_width="#dimen/dialog_close_button"
android:layout_height="#dimen/dialog_close_button"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="4dp"
android:src="#drawable/ic_unchecked_black"/>
<EditText
android:id="#+id/edit_address_title_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/text_add_address_title_addnewaddress"
android:hint="#string/address_title_hint_addnewaddress"/>
<EditText
android:id="#+id/edit_mobile_number_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_address_title_addnewaddress"
android:hint="#string/mobile_number_hint_addnewaddress"
android:inputType="number"/>
<EditText
android:id="#+id/edit_apartment_no_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_mobile_number_addnewaddress"
android:hint="#string/house_no_hint_addnewaddress"/>
<EditText
android:id="#+id/edit_landmark_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_apartment_no_addnewaddress"
android:hint="#string/landmark_hint_addnewaddress"/>
<EditText
android:id="#+id/edit_location_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_landmark_addnewaddress"
android:hint="#string/address_hint_addnewaddress"/>
<Button
android:id="#+id/save_address_addnewaddress"
android:layout_width="match_parent"
android:layout_height="#dimen/dialog_elements_height"
android:layout_below="#+id/edit_location_addnewaddress"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/dialog_elements_margin"
android:background="#drawable/add_button_back_about_product"
android:text="#string/save_address_button_addnewaddress"
android:textAllCaps="false"
android:textColor="#color/tabSelectedTextColor"/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
The problem is, edit-text fields at the bottom are hidden behind the soft keyboard. I tried updating the android manifest to android:windowSoftInputMode="adjustResize" within the particular activity yet no luck. Any solution for this?
<ScrollView>
<LinearLayout android:orientation="vertical"
android:scrollbars="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<EditView />
<Button />
</LinearLayout>
set your UI inside the LinearLayout and try.
I have a simple layout with:
top bar (like action bar) with save and back button
and below a scroll view with some EditText inside... (check the image below),
When I call keyboard, my view is push above... I would like my Top Bar to stay always visible and fixed on the top... (check below the image of what is happening and what I would like to happen)
I tried several solutions with android:windowSoftInputMode, putting the top bar as relative layout and set isScrollContainer in scrollview but none have worked for me...
Code Below:
<RelativeLayout
android:id="#+id/llWriteCommentWall"
style="#style/TextSubSeparator"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
style="#style/TextSubSeparator"
android:layout_marginBottom="#dimen/margin_separator_bottom"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left|center_horizontal|center_vertical"
android:orientation="horizontal"
android:layout_marginTop="#dimen/margin_title_top"
android:layout_marginBottom="#dimen/margin_title_bottom"
android:layout_marginLeft="#dimen/margin_title_left"
android:layout_marginRight="#dimen/margin_title_right"
>
<ImageView
android:id="#+id/ivMainMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/tk_btn_home"
android:onClick="clickHome"/>
</LinearLayout>
<TextView
android:id="#+id/tvSeconHeader"
android:text="#string/title"
android:layout_width="match_parent"
android:layout_weight="2.5"
android:layout_height="match_parent"
android:gravity="center"
style="#style/TextTileHealth"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="right|center_horizontal"
android:orientation="horizontal"
android:layout_marginTop="#dimen/margin_title_top"
android:layout_marginBottom="#dimen/margin_title_bottom"
android:layout_marginLeft="#dimen/margin_title_left"
android:layout_marginRight="#dimen/margin_title_right">
<ImageView
android:id="#+id/ivSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/tk_btn_tab_save"
android:onClick="clickSave"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:isScrollContainer="false">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_separator_bottom"
android:gravity="center">
<!-- EditBoxes -->
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/et1"
style="#style/TextEditBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:digits="0123456789."
android:inputType="numberDecimal"
android:maxLength="3"
android:layout_weight="0.33"
android:gravity="center"
android:ems="3"
android:layout_marginBottom="10dp"/>
<EditText
android:id="#+id/et2"
style="#style/TextEditBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:digits="0123456789."
android:inputType="numberDecimal"
android:maxLength="3"
android:layout_weight="0.33"
android:gravity="center"
android:ems="3"
android:layout_marginBottom="10dp"/>
<EditText
android:id="#+id/et3"
style="#style/TextEditBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:digits="0123456789."
android:inputType="numberDecimal"
android:maxLength="3"
android:layout_weight="0.33"
android:gravity="center"
android:ems="3"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
And Manifest:
<activity
android:name="com.example.slyzer.gui.new.NewValue"
android:label="#string/app_name"
android:windowSoftInputMode="adjustResize"
android:screenOrientation="portrait">
</activity>
EDIT:
I recently find out, that when you put the activity as Full Screen:
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
, the windows starts to act different from usual:
https://code.google.com/p/android/issues/detail?id=5497&q=fullscreen&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
and as described by Dianne Hackborn in here, this is how it's working, and it seems that there is no interest in changing it.
So, I tried the Joseph Johnson's AndroidBug5497Workaround, but I always end up with a "extra" blank bar above my keyboard, and the View steel doesn't show as I want it to...
Does anyone have a nice/simple solution to this problem?
android:windowSoftInputMode="adjustResize" in the manifest for your activity will keep the top bar in view and resize the scrollview to use what room is left.
The only issue I can see with this would be lining up the edit text with the viewable area after it has been resized (if this is needed)
Add this to the activity tag in the manifest:
android:windowSoftInputMode="adjustPan"
Or programmatically:
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
this may sound trivial but I am currently having difficulty in the display of the LikeButton. It does not look as intended.
It is supposed to look like this.
https://s3.amazonaws.com/uploads.hipchat.com/20645/978150/Pm1GbfbVvhpmjVU/Screen%20Shot%202014-10-24%20at%2010.25.15%20AM.png
Instead it looks like the following:
https://s3.amazonaws.com/uploads.hipchat.com/20645/978150/JEuU1CEq3Dvmzjj/Screen%20Shot%202014-10-24%20at%2010.27.56%20AM.png
Notice the extra long blue space being stretched and "Like" text being extremely small in the second pic.
Here is the code for the layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutFacebookLike"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:screenOrientation="sensorLandscape" >
<TextView
android:id="#+id/textFacebookIncentiveText"
style="#style/Huge"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="48dp"
android:text="#string/txt_facebook_incentive_default"
android:textColor="#android:color/white" />
<RelativeLayout
android:id="#+id/layoutFacebookLikeContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#40000000"
android:layout_gravity="center"
android:gravity="center_horizontal">
<Button
android:id="#+id/btnContinue"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="32dp"
android:paddingBottom="16dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:paddingTop="16dp"
android:text="#string/btn_continue"
android:layout_alignParentLeft="false"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:layout_centerInParent="true" />
<com.facebook.widget.LikeView
android:id="#+id/likeView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="64dp"
android:layout_centerInParent="true"
android:textAlignment="gravity"
android:layout_alignParentBottom="false"
android:layout_alignParentLeft="false" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
The code in the activity that I am using is as follows:
LikeView mLikeButton = (LikeView) findViewById(R.id.likeView1);
mLikeButton.setObjectId("121083561691");
mLikeButton.setLikeViewStyle(LikeView.Style.STANDARD);
mLikeButton.setAuxiliaryViewPosition(LikeView.AuxiliaryViewPosition.INLINE);
mLikeButton.setHorizontalAlignment(LikeView.HorizontalAlignment.CENTER);
mLikeButton.setForegroundColor(Color.WHITE);
Please let me know how I can correct it.
This issue arises when you have some themes and styling already set for the activity which interferes with the design of the LikeButton. If you set the default values, the Like Button appears normal.
Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)
Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>
try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not
I have this layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/viewer_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_dark"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="3dp"
android:layout_weight="1" >
<EditText
android:id="#+id/viewer_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_filter"
android:background="#android:color/white"
android:drawableLeft="#android:drawable/ic_menu_search"
android:inputType="text"
android:paddingLeft="4dp"
android:selectAllOnFocus="true" >
</EditText>
<ImageView
android:id="#+id/viewer_filterX"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/viewer_filter"
android:layout_alignRight="#id/viewer_filter"
android:src="#android:drawable/ic_menu_close_clear_cancel"
android:visibility="invisible" >
</ImageView>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="5dp"
android:layout_weight="1" >
<EditText
android:id="#+id/viewer_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_search"
android:background="#android:color/white"
android:drawableLeft="#android:drawable/ic_menu_search"
android:inputType="text"
android:paddingLeft="4dp"
android:selectAllOnFocus="true" >
</EditText>
<ImageView
android:id="#+id/viewer_searchGo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/viewer_search"
android:layout_alignRight="#id/viewer_search"
android:src="#android:drawable/ic_menu_send"
android:visibility="invisible" >
</ImageView>
<ImageView
android:id="#+id/viewer_searchX"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/viewer_search"
android:layout_toLeftOf="#id/viewer_searchGo"
android:src="#android:drawable/ic_menu_close_clear_cancel"
android:visibility="invisible" >
</ImageView>
</RelativeLayout>
</LinearLayout>
<HorizontalScrollView
android:id="#+id/viewer_hscroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/viewer_top" >
<ListView
android:id="#+id/viewer_list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</HorizontalScrollView>
</RelativeLayout>
When I click on either EditText it expands to this dialog:
On portrait mode the EditTexts can be edited as they are without expanding. The XML for portrait is similar, only the EditTexts are one below the other and are screen wide.
How do I prevent this EditText expansion?
Not only the full phone screen is hidden by the EditText + virtual keyboard, but the clickable images the I put over the EditText are not visible.
I tried to set the EditText layout_width to 0dp, but they don't show.
I am not using SearchViews because they steal the focus and I cannot use the back key to go back to the previous activity.
Update
I removed the layout-land XML and used the same XML for both portrait and landscape.
In portrait mode it is fine, no expansion, in landscape mode there is expansion.
So it has to do somehow with being in landscape mode.
add this line to your edit text
android:imeOptions="flagNoFullscreen"
edit text look like this
<EditText
android:id="#+id/viewer_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint_filter"
android:background="#android:color/white"
android:drawableLeft="#android:drawable/ic_menu_search"
android:inputType="text"
android:paddingLeft="4dp"
android:selectAllOnFocus="true"
android:imeOptions="flagNoFullscreen">
Try to use android:maxLines="1" for EditText
I had similar issue. You can use mEditText.setSingleLine(true); where you are using it. This will solve your problem.
Hi please add this line in java code where your edit text is declared description.setMaxLines(1);
This post addresses the same problem and has the solution
Need to add
android:imeOptions="flagNoExtractUi"
to prevent this behavior.
If someone knows how, please mark this post as duplicate.