# Keyboard over input fields

**URL:** <https://forums.fusetools.com/t/keyboard-over-input-fields/3109>\
**Category:** How-to Discussions\
**Created:** [January 31, 2016, 3:50pm UTC](https://forums.fusetools.com/t/keyboard-over-input-fields/3109 "2016-01-31T15:50:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![josh1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/josh1/32/567_2.png) [@josh1](https://forums.fusetools.com/u/josh1)\
**Post date:** [January 31, 2016, 3:50pm UTC](https://forums.fusetools.com/t/keyboard-over-input-fields/3109/1 "2016-01-31T15:50:14Z")

</div>

Is there a way to prevent the keyboard from covering input fields at the bottom of the screen? In native apps the whole screen gets pushed up when the keyboard comes onto screen to keep the input visable.

```auto
<DockPanel ux:Class="Login">
    <Grid Rows="1,1">
        <StackPanel Alignment="VerticalCenter">
            <Text Alignment="HorizontalCenter" FontSize="50">DumpLog</Text>
            <Text Alignment="HorizontalCenter" Opacity=".5">Track your bowel movements on the go.</Text>
        </StackPanel>
        <StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
            <TextInput PlaceholderText="username" Value="{username}" />
            <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
            <PooButton Text="Login" IsEnabled="{areCredentialsValid}" Clicked="{loginButtonClick}" />
            <Text Alignment="HorizontalCenter" Opacity=".5" Value="{errorMessage}" />
        </StackPanel>
    </Grid>
</DockPanel>

```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [February 1, 2016, 6:44am UTC](https://forums.fusetools.com/t/keyboard-over-input-fields/3109/2 "2016-02-01T06:44:57Z")

</div>

Hi!

You can use the `BottomFrameBackground` to achieve this. It is an element which will get the size of the keyboard (and bottom bar on some android devices).

We usually dock it to the bottom of a `DockPanel` :

```auto
<DockPanel>
    <Panel>
        ... your content ....
    </Panel>    

    <BottomFrameBackground Dock="Bottom"/>
</DockPanel>

```

You can use the `TopFrameBackground` to compensate in the same way for the status bar.

Because this taks is so common, we have wrapped it in an class called `ClientPanel`, which basically looks like this:

```auto
<DockPanel ux:Class="ClientPanel">
    <TopFrameBackground Dock="Top" />
    <BottomFrameBackground Dock="Bottom" />
</DockPanel>

```

I hope this helps 🙂

---

<div class="post-metadata">

**Author:** ![josh1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/josh1/32/567_2.png) [@josh1](https://forums.fusetools.com/u/josh1)\
**Post date:** [February 5, 2016, 1:54pm UTC](https://forums.fusetools.com/t/keyboard-over-input-fields/3109/3 "2016-02-05T13:54:50Z")

</div>

Thanks very much for the help, this is exactly what I was looking for 🙂