How to fix a container on the top of one or more app's views

Hello,
Maybe one of your people could help me with this issue. Thank you so much in advance.

I want to create an app with two containers, a "menu" container, that always stay fixed at top (even on scroll action). This container will keep all the menu items, and always must be visible on the app's top. And then, a second container with all the "contents", this container will be bigger in height than the app's height, so I could scroll down and up to see all the container contents.

Please see the picture for better reference: http://prntscr.com/dz5eok

I did not found an "on change" event on view or design to include some code to maintain the "menu" container always visible at the very top of the application. So, could you help me with this issue???

Thank you so much!!!
Eduardo.

Hello Eduardo,

I think we touch various things here, so let me to try to explain these one by one:

1º If we place a Container or any other control on the top of an app's view, then such controls appear on the top of the application without nothing more to do. Certainly the Container, HTML or Iframe controls are candidated to place it on the top of an app's view, for example, and, to achieve what you wanted, we can use a bit of CSS (or the SetStyle action) with that. For example, if we place a Container1 on the top of an app's view and then apply to that control the below style (we can use the app's Inline CSS option to do that) we can achieve exactly what you wanted, that is, not only that the control remains on the top, but also made the control "fixed":

When the above style is applied then the Container control appear "fixed" on the app's view and the possible controls situated below can "scroll" below the Container control. About the other Container, that is, the container you want to place below the menu one, maybe are no needed at all. We can simply place controls below the menu Container and, if needed, we can also exceed the app's view height without problems (see the samples attached below).

2º If what you want is to get the above Container in every app's view, maybe what you can do is to use the app's Master view to place the Container. Then you can set the others app's views' "DrawMaster" option to "true" and therefore the Master view's Container appear also in that other app's view.

-------------

I am modified a bit the HtmlContent app sample in order to try to help you and I upload it here to share also with others. The below zip file contains another "NavBar" sample too, which can be considered a bit experimental. This last sample uses some thirdparty Javascript in order to use the navigation bar of the Bootstrap CSS framework. Please, take a look at the two samples included in the below zip file and then post here any question you have.

Click here to download eduardo.zip

Hello Eduardo,

Please, upgrade your App Builder copy. In addition to the above attached samples, I added a new application sample to App Builder: "FixedContainer", that try to help you and other people. Again, just post here if you have any further question related with this thread.

Hope this can help you!

Thank you so much David for your very best support!!!

Hello,

Thank you so much David for your very best support!!!

You're welcome! :)

Hello David,

It is working like charm... thank you so much!!
Just one more question. ;-D THX

I have added a left side menu, similar at the one that appears on the sample "SwipeMenu". I have use CSS translate to move both containers to the right, so the side menu gets revealed. The mainly problem, is that I can scroll the large container in any direction, up, down, left or right. So I am wondering if I can fix or block the container to scroll left or right.

Please, se attached picture for better understand me.

Thank you so much!!!
Eduardo

Hello Eduardo,

Can you please me provide a minimal sample application in order to take a look? Maybe it's a question to use the "SetStyle" action to set the height of the menu's control or something like that, but I can't figure out without take a look at a minimal sample. Maybe you can place a design time comment control too to describe what you expected and what you get. Please feel free to use this forum's upload section.

Hello Eduardo,

Please, upgrade your App Builder copy. In addition to the above attached samples, I added a new application sample to App Builder: "FixedContainer", that try to help you and other people. Again, just post here if you have any further question related with this thread.

http://i.imgur.com/i1AzWWd.gif

Hope this can help you!

Hi David,

I am learning from sample project "eduardo.zip" you posted. Having a look at the sample I noticed that that scroll bar is overlay on the obejects (Buttons, InputBox).

Could you please have a look at it and rectify the issue?

Thanks

AB Rocks!

Hello Edunt,

Hi David,

I am learning from sample project "eduardo.zip" you posted. Having a look at the sample I noticed that that scroll bar is overlay on the obejects (Buttons, InputBox).

Could you please have a look at it and rectify the issue?

Thanks

AB Rocks!

I think this is a "defect" of the debugger browser (certainly rare... may I can take a look at that) that do not appear when deploy the app. :)

Alright,

I will deploy the app on mobile device and I will give feedback later.

Thanks

Alright,

I will deploy the app on mobile device and I will give feedback later.

Thanks

That's good! :)

Already solved,

What I did is set the position fixed with SetStyle when the “side menu” is visible or enabled, and then set position to relative when side menu is hidden or disabled, it is working very nice.

Just for your reference, I have notice, that this issue does not appear if you create the side menu at your right.

Thank you so much!!!
Eduardo

Hello to all,

Already solved,

What I did is set the position fixed with SetStyle when the “side menu” is visible or enabled, and then set position to relative when side menu is hidden or disabled, it is working very nice.

Just for your reference, I have notice, that this issue does not appear if you create the side menu at your right.

Thank you so much!!!
Eduardo

Please, Eduardo, can you provide here (if they are not too much work) a little working sample in order to take a look?

Sure,

Please, see attached the example for this case.. I solved like this...
left_side_menu.ab

Eduardo

Hello Eduardo,

Thanks very much! :)

Hello to all,

Anyway I want to add something. If we must shown a menu to the user, a possible good approach is to use a view as a dialog (or not) or with some animation (left to right?), so that view can contains any controls like buttons, allowing the user to do whatever they wanted, for example, tap in a button to goto into another app's view.

Just to add another possible approach that may someone want to try. :)

Is it not much easier and neater to use the master view for this?
Then you click the "master is visible" on all views where you want the master stuff to "show through".
This means the code is all in one window, and much easier to manage...

Hello fakie,

Is it not much easier and neater to use the master view for this?
Then you click the "master is visible" on all views where you want the master stuff to "show through".
This means the code is all in one window, and much easier to manage...

I am not quite sure. Talking about a menu, and, as I say before, one possible good approach is to use one (or more) app' view, but I am not sure if this must or can be the app's master view. I think not, because, if you place a button, for example, in the master view, and draw that master view in another, then the button appear in that another view: maybe up to others controls.

Just as I say before:

[...] If we must shown a menu to the user, a possible good approach is to use a view as a dialog (or not) or with some animation (left to right?), so that view can contains any controls like buttons, allowing the user to do whatever they wanted, for example, tap in a button to goto into another app's view.

Here is an example of what I mean...
MenuPractise.ab

One menu to rule them all :-)

Hello to all,

Here is an example of what I mean...
MenuPractise.ab

One menu to rule them all :-)

Thanks for sharing fakie!

Here is an example of what I mean...
MenuPractise.ab

One menu to rule them all :-)

Nice looking top menu.

Hello to all,

Just to say that I add the new "Menu4" sample into App Builder, and, also attach it here for your convenience: Menu4.zip. Here is an extract from the App Builder's history file:

This app sample show us how we can use an entire app's view to place a Menu control, in order to be used in any moment in a normal or modal way. Certainly this approach have various advantages: the menu fit all the view space; the menu can contain any number of items, since they scroll without problems; the menu's view can contains other controls; it's possible to show the menu from any other app's view; and, last but not least, this approach works fine in desktop and mobile.

Hope they can be useful!

Good idea.

Hello Eduardo,

Please, upgrade your App Builder copy. In addition to the above attached samples, I added a new application sample to App Builder: "FixedContainer", that try to help you and other people. Again, just post here if you have any further question related with this thread.

http://i.imgur.com/i1AzWWd.gif

Hope this can help you!

that's also what i want