multiview-animate layout

Site and Services
1

I’m trying to simulate the example below, where if you
change tabs only the multiview changes, view to the the left does not.

http://docs.webix.com/samples/16_skins/15_contrast.html

My example differs slightly from the example in that I want the tabs to go across the top of the whole screen. I’ve got this far.

http://webix.com/snippet/252bdfb6

I’ve viewed the example code but don’t see any clues.

I also note in the example there is a defined space between the tool bar at the top and the views below as well as a space between the views. I am unable to get these spaces and I don’t see how to do it in the example code.

2

I want the tabs to go across the top of the whole screen

Tabs are connected with the multiview cells via ID and themultiview:true property, no matter where they are placed within the container. If I understood the use-case, you need just place the ‘event’ view in a separate column. Here’s a sample of the layout configuration:

http://webix.com/snippet/1e3da7de

3

That is perfect, I managed to work the spacing using the ‘type’ property (although mine looks a little odd), I see you use the body property I’m wonder if that has an effect. I think I understand now how to do the tabs. Thanks again for your assistance.

4

For the ui.scrollview and ui.accordionitem body is a necessary definition for the container.

Also, in particular components that have a unique configuration, the view definition can be omitted. For example, the following notation will be interpreted as an accordionitem:

{ 
    header:"Some header",
    body:{ /* content */ }
}
5

what am I missing?

http://webix.com/snippet/be571672

I have added the empty row

,{} so that the left panel will fill the whole the whole area from the top to the bottom, but no what ever I do, it remains? Followed all the examples :frowning:

6

> I have added the empty row

By default, views without specified sizes take the equal space. Try to set the relative size to the spacer (empty cell):

var flight_selector = {
  width: 400,  
  multi:false, 
  rows:[
    { 
      . . .
    },
    { gravity:0.001 }
  ]
};
7

perfect, I would never have got that. Not something I see in other examples. Have several other issues I’m trying to resolve but I like to try and resolve myself first. Thank you again for your assistance.