Hide div on input focus

[tyutghf]

Hi

I have a simple form that is being displayed in kiosk mode using a tablet. When the user clicks to enter data to the input field, the keyboard takes up the bottom 1/3 of the screen and hides the other items they need to click.

To solve this, I could remove the header when they click in the input field, this will move the inout field to the top and expose the other field they need to click.

Can I do this with css?

<header>
This is the element to remove on input click
</header>
<h1>Also remove this on input click</h1>
<div class='content'>
<form>
<input type='text' name='fullname' id='fullname' /> On clicking this, the header and h1 are hidden above, effectively moving this input field to the top of the screen.
</form>
<p>Other info that is currently hidden by the keyboard.</p>
</div>

Thanks

 

[feherke]

Hi

Can I do this with css?

Not really. If the [tt]h1[/tt] would be immediately after the [tt]input[/tt], then the Next-sibling combinator would do it :

http://dabblet.com/gist/54aa902416d2b6800e5360e88985e0f0

. But there is no such thing like previous-sibling.


Feherke.
feherke.github.io

 

[tyutghf]

Thanks, looks like I'll have to find a jquery solution to make the input scroll to the top of the page which may actually be a better solution.