How to anchor a container to the bottom tab bar.
Question
Application Type
Mobile

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?

banner.jpg

mvp_badge
MVP
Solution

Tom did you check my solution? I believe it exactly does what you need.

Solution

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.

samplepageBottomUpdated.oml

Solution

Yes.. Thank you.  I've gleaned useful tips from yours and Manish Gupta's responses. 

mvp_badge
MVP

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

StickToBottom.oap

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?

mvp_badge
MVP

Hi here it is working, I used the FloatingContent widget from OutSystemsUI.



StickToBottom.oap

mvp_badge
MVP
Solution

Tom did you check my solution? I believe it exactly does what you need.

Solution

Yes.. Thank you.  I've gleaned useful tips from yours and Manish Gupta's responses. 

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.

Hello Tom

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.

samplepage.oml

Solution

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.

samplepageBottomUpdated.oml

Solution
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.