17
Views
9
Comments
Solved
List extends beyond containing container
Question
Application Type
Mobile

My general question is how to get widgets with in a container to be constrained to the bounds of their parent container.  How this is biting me now is I have a screen with a list and a bottom tab bar .  I haven't been able to make the list's bottom not drop down below the top of the bottom bar.  The attached image shows what i'm talking about and includes the relevant widget tree.  Any help with this will be greatly appreciated.   BTW originally I didn't wrap the list in a container, thinking that it would automatically not overlap the bottom bar.  I then wrapped it in a container thinking that I could brut force it's compliance.  It was not to be.


Rank: #3247
Solution

Thanks for the example and sorry for disappearing for a while. Something came up that drew me away from this.  Anyway I was able to copy your bottombar stack and paste it into my project and it works fine.  I just need to go back and figure out why I wasn't able to reproduce this without your example.  I'm sure it's my lack of clarity on how the whole thing fits together.  I've been living in an Apple (MacOS and IOS) world for so long - other systems and platforms are a real challenge for me.  Thanks again to all those who provided feed back to this.

Rank: #94
Solution

Hello Tom,

Hope you're doing well.


If you just place a Container in your page (without any associated style or class), it will simply add an empty div to your HTML:

This means that adding a Container by itself won't add any additional styles to your page. It basically creates an empty element and that's it. Visually there will be no changes. The widgets inside a Container won't be constrained to the bounds of that parent Container unless you define this behavior in your code.


If you want to add styles that may change your layout, there are several ways of doing that in OutSystems. As a simple example, let's say that you want to add an height of 200px to this empty Container.

1) Define a CSS class in your Style Sheet and use it in the Style Classes property of the Container:

This will add the attribute class to this element in the HTML with that specific class and the CSS is defined in the style sheet resulting in


2) Define an attribute directly in the Attributes of the Container:

This will add the attribute style to this element in the HTML resulting in


3) Use the Styles tab of the Container and change the Layout:

This will also add the attribute style to this element in the HTML resulting in the same as the previous one.


Overall, it is a good practice to use first option. The main reason is because you will maintain a centralized place for your styles and classes. If you apply a class in different places of your code, you just need to alter that CSS class in the Style Sheet and those changes will be applied to every location where this class was applied.


Now let's focus on your issue:

I can see that you're using default Common\Layout Block in your Widget Tree.

By default, OutSystems has already another Block that will cover your issue: Common\BottomBar.This Block already has the needed CSS classes to support exactly the behavior that you want to achieve.

Just place this Block inside Bottom placeholder, like this:

Finally, you just need to move your BottomBarItems to your BottomBar Block:


Hope that this helps you!


Kind regards,

Rui Barradas

Rank: #3247

Thanks for you detailed reply.  It's very informative and will save me a lot of time going forward.  Regarding "Common\BottomBar", I did try that before trying "Common\Layout".  The problem I had with that was that the bar items were vertically stacked (see attached screen.  BTW I just duplicated the first item to see if it was going to work) and there didn't seem to be any way to fix that.  However, now that I look at your screenshots I see "bottom-bar-wrapper" and "bottom-bar ph" under "BottomBar". I am not seeing those objects anywhere on my system.  It seems likely that these items may be critical to my situation.  Where did these come from?  Thanks.

Rank: #94

Hello Tom,

About "bottom-bar-wrapper" and "bottom-bar ph", they are Style Classes that you should apply to your Containers:


When you created your module, by default these 2 Containers should already be inside your BottomBar with these classes applied. These classes are defined in OutSystemsUI Theme Style Sheet.


Kind regards,

Rui Barradas

Rank: #3247

We might be onto something.  If I create a whole new mobile app and add a blank screen, there doesn't appear to be any mention of or reference to bottom-bar-wrapper or bottom-bar ph. However, in the Outsystems UI style sheet there is a definition of bottom-bar-wrapper.


/* $4.4.1 - Patterns - Navigation - BottomBarItem */

.bottom-bar-wrapper {

    background-color: var(--color-neutral-0);

    border-top: var(--border-size-s) solid var(--color-neutral-3);

    height: 100%;

}


There is no reference to bottom-bar ph


I wonder if my environment is somehow whacked out... if so I could download a new Service Studio.  Oh by the way, I am using the MacOS version of Service Studio... I wonder if that plays into this at all.


As shown on the attached screenshot, "Common\BottomBar" isn't editable and doesn't contain any style class properties.  Full disclosure, I am a newbie at outsystems but not to app development.  I have been a developer for 30 years on MacOS and now on IOS.  Somehow I am not connecting some dots as to how all of this UI stuff operates in Outsystems.  The documentation hasn't helped much with this bottom bar issue.  I appreciate all the help I can get.


Would someone be able to provide an .oap file with a screen that contains the bottom bar with 4 bottom bar items?  I could then compare that to what I am able to create on my system. 


Rank: #94

Hello again Tom,

You are seeing an instance of BottomBar block inside mainScreen.

You have to enter inside BottomBar block itself. It should be present in Common UI Flow:

If you double-click on it, you will open it in Service Studio and you will be able to see its Widget Tree. Like this:


In here, you should be able to edit it and add your BottomBarItems like the example above.

Those "bottom-bar-wrapper" and "bottom-bar ph" classes should be there by default :)


Let me know if you managed to do it.

If needed, I can create an example and drop it in here :)


Kind regards,

Rui Barradas

Rank: #3247

Sadly this is all I see.   I guess an example would definitely help.  Thanks

Rank: #94

Hello Tom,

On your image, please click on Widget Tree button:

And it will change to Widget Tree view:

Kind regards,

Rui Barradas

Rank: #94

Hello again Tom,

Did you manage to solve your issue?

I made an example for you, as requested :)


Please refer to attached OML file.


Hope that this helps you!


Kind regards,

Rui Barradas

MobileModuleTest.oml

Rank: #3247
Solution

Thanks for the example and sorry for disappearing for a while. Something came up that drew me away from this.  Anyway I was able to copy your bottombar stack and paste it into my project and it works fine.  I just need to go back and figure out why I wasn't able to reproduce this without your example.  I'm sure it's my lack of clarity on how the whole thing fits together.  I've been living in an Apple (MacOS and IOS) world for so long - other systems and platforms are a real challenge for me.  Thanks again to all those who provided feed back to this.