Screen is adjusted to fit soft keypad on Android device

Hi,

I have a screen wherein I have two inputs at the top of the screen and a 'Search' button below it. There's one more button at the bottom of the screen. 

When I click on any of the input field, the keypad slides the button over it and block the UI components at the top. Please refer the screenshot attached.


Can any please help me in getting rid of this behavior.

Note: Expected behavior is that the component residing at the bottom of screen should go behind the soft keypad (when opened).


Regards,

Shreyas Bhondve

Hi Shreyas,


Can you describe the widget tree of your application? I'm trying to reproduce the problem without success

Jay Santos wrote:

Hi Shreyas,


Is the button at the bottom included bottom placeholder or bottom bar web  block?


It is in the bottom placeholder

 wrote:

Hi Shreyas,


Can you describe the widget tree of your application? I'm trying to reproduce the problem without success

I have the two input fields and the 'Search' button in a Block, placed inside the content of Screen. And the bottom icon is in the bottom placeholder of the screen.


 

I'm assuming the blue button (the one that slides) is inside the "PayRollContainer"?


Did you changed the style of the button and/or the container?

I'm asking because I did a similar layout (albeit a bit simpler: My Main Content only have one input field that I can tap to show the keyboard) and my bottom bar button does not float up when the keypad shows up.

Jay Santos wrote:

I'm assuming the blue button (the one that slides) is inside the "PayRollContainer"?


Did you changed the style of the button and/or the container?

I'm asking because I did a similar layout (albeit a bit simpler: My Main Content only have one input field that I can tap to show the keyboard) and my bottom bar button does not float up when the keypad shows up.

Hi Jay,

The button is in the Content and not in the bottom bar.

Here is the widget tree


The CSS classes are as follow:


SyntaxEditor Code Snippet

.hospitalSearchIcon{
    position:absolute;
    bottom:0;
    right:0;
    margin-right: 10px;
    margin-bottom: 100px;
}


SyntaxEditor Code Snippet

.msgBoxHome
{
    background:linear-gradient(to bottom, #ffb615 0%, #ffc815 100%);
    color:#444444;
    padding:9px;
    border-radius:13px;
    position: absolute;
    bottom:0px;
    right:0;
    margin-right: 10px;
    margin-bottom: 180px; 
    text-align: center;
}