Forward /bacward order for objects

[Håvard Fosså]

I am designing a status view for a sun shading project, showing the status of the blinds in a facade view.  The interface is showing the actual blind position, the slat angle and the state of control - manual or automatic.

There is also several blocking object for each floor /facade, where the blinds can be blocked.  I want to have information about present blocking status for the following blocking objects which  have the following priority:

1. Fire alarm 
   
2. Service 
   
3. Wind 
   
4. Window cleaning
   
5. Blind cleaning  
   

I tried to do this using suitable icons for active blocking.  For showing the state of no blocking i made a custom icon with a transparent background, showing nothing when the blocking is inactive.  Then i place all the icons in the same position in top of each other, with the icon with  highest in priority in front, and those with lower priority backward.

I thought the backward/forward order for the icons was based on when they were created, but i can not find how to control of the backward /forward order for the icons.  

In graphic applications, eg. Visio and Publisher, there is a move forward /move backward button to control this behavior.

My question:  How is the backward / forward order for icons defined, and is there anyway to control which icon will be in front?

[Daniel]

Hi
The same type of object have no priority, they will be displayed randomly. The only priority is based on different type of visual objects and it they are on plan or on layout.
The only solution for you is to create a byte object and create additional icons, then you need a script which will write a value to the byte to display correct icon depend of your override state.
BR

[Håvard Fosså]

Ok, thank you.

[Thomas]

You can create custom CSS classes like these:

Code:

.ontop {
   z-index: 80 !important;
}
.onbottom {
   z-index: 60 !important;
}

and set your objects to your classes. Higher number means upper position.

[DGrandes]

Hi,

A I´ve created drop-down menu in layer, but it is always below, even if I set z-index to those objects. Is there any way to put over all plans?

[admin]

Do you mean in layout? Z-index affects element order only relative to parent container and layout is always below current plan.

[DGrandes]

What is the best solution to make a drop-down menu (without using the default menu)?
I've tried different ways with a widget but I can´t get it to work:

1 -
 In Java:

Code:

$(function() {
      $("#widget-2").appendTo('#layout-3').removeClass("hide");
           $('.click').on('vclick', function() {
           $("#widget-2").toggleClass("show");
       });
});

 In CSS:
  

Code:

#widget-2 {
  left: 50px;
  transition: left 0.5s;
  transition-timing-function: linear;
}
.show {
  left: 0px !important;
}

 It work fine but widget hide automatically.

2-
 If I change JavaScript to:

Code:

$(function() {
     $('.click').on('vclick', function() {
           $("#widget-2").appendTo('#layout-3').removeClass("hide");
           $("#widget-2").toggleClass("show");
     });
});

 CSS transition don´t work...

Any idea?
Is there any way to append widget fixed without hide class to layout-3?

Thanks

[DGrandes]

This is the problem. The menu is in layout:

   

As you can see the menu get out behind the objets on the plan.

Please, how can I solve it?

Thanks

[admin]

You can put layout on top of the plans via Custom CSS:

Code:

.layout {
  z-index: 7;
}

[DGrandes]

Thanks!!!

It works perfectly