Input component in footer

[Cody Blue]

I am looking for place an Input component in the footer of a page. While the header has this provision - I can drag and drop the Input component - I am unable to do so for the footer.

How may I accomplish the needful?

Thanks for your suggestions!

[Evgene Karachevtsev]

Hello Cody,,

You may use grid component 1*1 and add CSS class "ui-footer-fixed" to it instead of footer. And add input component to it. This is how to add class:

[Cody Blue]

Hello,

I am experiencing problems with this approach: The grid component doesn't scale with different screen sizes and form factors. I've attached three screen shots (the first one is acceptable but the rest two are not). The grid dimension is set to 100% auto.

What you recommend? I basically want the message box in footer to scale with screen width.

Many thanks.

[Alena Prykhodko]

Hello Cody,

When you change screen sizes on Preview do you press Refresh button?
Otherwise changes won't apply.

[Cody Blue]

I am not changing screen size dynamically. What I meant to indicate is that I create the grid component within Appery UI footer and then test it with different screen sizes. With the first one (320X480 - see first screen shot) the appearance is as expected; with the latter two there is the issue I mentioned.

What would you suggest to resolve this?
Thanks.

[Alena Prykhodko]

Cody,

Do you test app in browser or as native?

[Cody Blue]

Within browser (specifically Appery.io tester). Will look forward to feedback in troubleshooting this.

Thanks!!

[Kateryna Grynko]

Hi Cody,

Could you please clarify if you mean to change frame size in browser? Do you click Refresh button after changing frame size (left button on screenshot) ?

[Cody Blue]

Hi Katya,

This is correct. I change the frame size in the browser. In spite of clicking refresh, the grid component doesn't scale, as indicated earlier.

Thanks.

[Yurii Orishchuk]

Hi Cody,

You problem is not with main container.

You have in your grid two cels.

First cell has width dimmension with value "237px".

So solution for you is:

1 Open your page.

2 Activate first(left) grid cell and properties side bar will show properties for this component.

3 In dimensions width field place "auto" value instead of "237px".

4 Do the same with second grid cell and set width dimmensions with "30px"(you can adjust this like you need).

That's all.

Regards.