Fill GroupBoxes with relative positioning from bottom to top

Ask Questions
1

Hello everyone,

is it possible for the child elements in a GroupBox (childPositioning=relative) in mapp View to be filled from bottom to top?

There is the “float” setting. However, this only allows flexibility in the left/right direction

Do you have any ideas/experiences? Does this perhaps work with other widgets?

Thank you in advance for your input!
Simon :slight_smile:

2

Hi Simon,

As I know there is only GroupBox and FlexBox that has this “relative” positionning with “float” settings.

But as “float” is defined in FlexBox it’s same behavior than for GroupBox.

If I understand what you want to have is to have the first item visible in the GroupBox to be anchor at the bottom of the GroupBox and next items on top of each other ?

Maybe take a look at creating your own GroupBox based on the GroupBox official source code. At first look, I would say it CSS thing but I didn’t really look inside.

Hope that could help !

Regards,
Florent

3

You want something like this ?

image
image600×478 5.31 KB

1 Like
4

Yes. It should look like that!

You man using Widget Developement Toolchain?
I’m currently using mappView 5.24.3 :confused:

5

I didn’t used Widget Developement Toolchain for that. I was just using DevTools of content editor to change some css properties.

image
image1374×872 195 KB

image
image1471×806 186 KB

I didn’t have access to WDT for AS4.XX but we can do it by hand.

I will try to take some time this weekend to create a new groupbox that implement this parameter on the repo ( br-automation-com/mappView-CustomWidgets: Collection of new and modified mappView widgets).

6

Hi @Simon_Stoll,

I’ve work a bit on the GroupBox, I have something working. I just have a question, if there is a scroll bar because of the number of items inside the GroupBox, would you prefer the scroll bar to be by default at the bottom:

image
image411×213 1.39 KB

Or at the top:

image
image425×251 1.38 KB

7

Pull request has been created on the repo :slight_smile:

1 Like
8

I merged it, thx for sharing

1 Like
9

Hi Florent,

thank you so much for creating extended GroupBox. I didn’t think about manipulate widgets in css properties :slight_smile:

Don’t worry about the scrollBars. I don’t need them for my use case.

Maybe I’ll find a solution to set Anchor to “bottomRight”.

1 Like
10

I can check about the float to be working with anchor bottom

1 Like
11

@florent.boissadier @stephan.stricker Thanks for creating this Groupbox, we have used this in our project with AS4.12. Currently we are moving to 6.3 and this widget is not working anymore. I saw that you have updated the library to work with 6, but the Groupbox is not in the new library: GitHub - br-automation-community/mappView-CustomWidgets: Collection of new and modified mappView widgets

Are you planning to update the Groupbox to version 6.x somewhere in the future? Thanks!

12

Hi, stephan is currently merging old widget to version 6 so I think it will be available soon

1 Like
13

@Rens_B I convert the widgets on demand. I will try to convert the group box later this week or next week at the latest.

1 Like
14

That is great!! Thank you very much!

15

Hi Stephan,

In the groupbox that Rens is talking about, I adjusted the CSS to accomodate the child elements arrangement to the middle. Would it be possible for you to make it an option out of it please?

Thank you in advance!

16

Hi @Claudiu_M

I’ve made the pull request on the repo for the GroupBox, what is the actual CSS you edited?

17

Hi @florent.boissadier ,

In the GroupBox.sass.css, “.brXtendedGroupBox.horizontal > .container {“, i added “justify-content:center;” which arranged the child elements to the middle when the groupbox was set up as “alignment: horizontal”, “childPositioning: relative”.
Before:

.brXtendedGroupBox.horizontal > .container {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  position: absolute;
}

After:

.brXtendedGroupBox.horizontal > .container {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  position: absolute;
  justify-content: center;
}

Thank you!

18

Ok I see. I will check for add a parameter for this usage

19

@florent.boissadier Upgraded the group box widget to AS 6.3. Many thx for that. Please give it a try.

br-automation-community/mappView-CustomWidgets: Collection of new and modified mappView widgets

1 Like