After a lot of trial and error I got the 4 button tab bar to anchor to the bottom of the screen. Now I need to anchor a banner to the tab bar. every screen will have the tab bar with a 40 px high banner sitting on top of it. See the attached screen shot. any ideas how to pull this off?
I have done this using the Bottom Bar
Please find the attached OML.
While using this in the BottomCommon Widget you might facing the issues of Hiding the Bottom Icons. It was because of Dynamic Height to the Bottom. You can fix the Height and it works.
Please feel free to ask in case you have any further question.
Tom did you check my solution? I believe it exactly does what you need.
Yes.. Thank you. I've gleaned useful tips from yours and Manish Gupta's responses.
Thank you so much for your help.
Hi Tom,
That is not too difficult, the trick is the bold part in the CSS; make sure your banner contain has banner set as Style class
.banner { height: 40px; border-style: solid; position: absolute; bottom: 0; width: 100%; }
See attached OAP file with a sample application with a reusable banner block that you can use on multiple screens.
Kind regards,
Daniel
Thanks so much for that help. I can see I've a lot to learn about CSS. There is still one little issue with this solution though. The banner needs to stick to the tab bar and not scroll up and down with the rest of the window content. So far my attempts to fix this have failed... surprise surprise. Any ideas?
Hi here it is working, I used the FloatingContent widget from OutSystemsUI.
Hello Tom
Have you tried with using the BottomBar Common Screen Block?
You can add the banner there and it will already be there in the Bottom on each Screen. I have created bottom bar using this for my app and it works fine.
Thanks
I did try adding a banner to the BottomBar Common Screen Block, placing it on top of the tab bar. For some reason this caused the tab bar to sink down below the bottom of the screen by the height of the banner. I'm sure something is CSS would fix this but I haven't stumbled on it yet. Could you send me an example of what you have working? Thanks. That would be awesome.
CSS would not be a big thing. I can share my screen but that will not help you. Better would be to get the CSS for the template where you are working.
My Suggestion is to create this in Bottom Tab Only as you are going to use this at every screen and changes are quick using this block.
Please create the bottom bar block use it on a Sample Screen and share the Project URL with us. We will inspect and help you with the CSS.
Thanks :)
Thanks for your willingness to see this through. I've created a single page project and implemented all that I know how to do so far. I've also attached an illustration of what the screen renders as currently (left) as compared to the desired effect (right) . BTW the images are random images pulled from google images.