Content-filling form with button below

ionic-v1
1

Hello,

I’m trying to create a form composed of 3 textareas and a button. The 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 textarea which is between other two.

From my tests I’ve learned the following (please feel free to point out any inaccuracy):

  • The action button must be inside ion-content to be able to access the $scope and thus the model. Therefore I can’t place it in a separate footer.
  • The ion-list must be the container of the inputs to make the soft. keyboard work properly (tested in Android with windowSoftInputMode="adjustResize" and the com.ionic.keyboard plugin).
  • A way to pull the button to the bottom of the screen is forcing the height of the generated div.scroll and div.list to 100% and use position: absolute on the button (position: fixed didn’t work as expected). I got this from this post.
  • If the height of the div.scroll and div.list is 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 button in a form and a “expandable” textarea which fills the remaining space).
  • If not, how would you workaround it not using jQuery?.

Thanks beforehand.

2

Nobody experienced the same issue?. Is it off-topic?.

3

Taking a look into this

4

Oh, boy, so I hope this is alone the lines of what you want.

Keep in mind that all these prefixes are the browsers fault, not mine :smile:

if you need a hand with flex box, check this out.
http://the-echoplex.net/flexyboxes/

1 Like
5

I see that though the flex-box feature isn’t stable yet (several specs., I guess that’s the reason of the prefixes for each vendor), it’s fairly supported in Android and iOS (http://caniuse.com/#search=flex).

I’ll look into it.
Many thanks!.

6

For that platforms that Ionic supports, Flex-box will work.