I’m trying to create a form composed of 3
textareas and a
button must be on the bottom side of the screen and the middle
textarea should fill any remaining space (height) in the screen.
I’m having trouble with these two points:
- Fix the button to the bottom of the screen, even if the content area weren’t filled.
- Fill the spare content area (if any) with a
textareawhich is between other two.
From my tests I’ve learned the following (please feel free to point out any inaccuracy):
- The action
buttonmust be inside
ion-contentto be able to access the
$scopeand thus the model. Therefore I can’t place it in a separate footer.
ion-listmust be the container of the inputs to make the soft. keyboard work properly (tested in Android with
- A way to pull the
buttonto the bottom of the screen is forcing the height of the generated
div.listto 100% and use
position: absoluteon the button (
position: fixeddidn’t work as expected). I got this from this post.
- If the height of the
div.listis set to fill the screen, then the soft. keyboard doesn’t work well (inputs are hidden when the keyboard is shown and the contents of the screen are neither resized nor panned).
This is the closest I’ve got: http://codepen.io/anon/pen/hAIgb
Please take into account that some solutions might work on a desktop browser but behave different on a mobile browser.
And now the inevitable question:
- Is there a more straightforward / ionic way to achieve both things I’m trying to do? (a footer-like submit
buttonin a form and a “expandable”
textareawhich fills the remaining space).
- If not, how would you workaround it not using jQuery?.