Creating a Complex and Fluid Layout in Angular

Webix JS
#1

Hi Maksim,

Here’s a complex layout I’m trying to create (snippet id 7170e239)

http://webix.com/snippet/7170e239

A few issues:
(critical): not able to get the accordion view to work
(critical): can’t get the appropriate input to display (in the ng-repeat loop)
(critical): the view does not resize when the browser size changes;
(critical): Unable to figure out how to specify the view stacking order on smaller devices (eg, tablet)
(cosmetic); the fill on the top toolbar is incomplete
(cosmetic): some icons do not display in the toolbar;

As always, your help is much appreciated!

Larry

PS. In the snippet editor, could you put a horizontal resizer between the JS and HTML views

#2

Check the updated sample
http://webix.com/snippet/9d8aa585
it still has few rough places, though.

a) accordion

  • if you want to have a single collapsable section - define all stack as accordion, and mark the the collapsable cell with “view=body”

b) resizing

  • the ui enables auto-resizing only when it placed directly in the body tag. If it wrapped in extra divs it need to be done manually. I have added webix.event line in conntroller. ( Will be improved in the next build, probably by adding webixResize directive )

c) inputs

  • I have changed the logic of rendering, check the updated snippet ( not quite sure here )

Overall

The html code which you have used contains many unnecessary DIVs, they are just complicating the rendering and adding extra borders. Also, you have used a webix-view instruction inside of webix-view block ( inputs inside of the main layout ). It will work better if you have one top-level webix-view block and inside of it only view markup.

Still not fixed

  • webix-options - will be added as part of the next build
  • top header renders badly - not quite sure, probably related to the snippet tool itself, will be fixed anyway

P.S. the problem with icons - is a known issue. Entypo web font doesn’t work with latest Chrome 32 ( works fine in other browsers ). It will be fixed in Webix 1.5 ( either fixed by Entypo creator, either we will switch to Font Awesome )

#3

Definitely a great improvement!

Actually, the app is littered with accordions, both vertical and horizontal, Some single like the one you put in and another vertical one - like the one I put in…which isn’t working.

The logic behind the inputs is that they should actually go into an accordion or listview, according to the group property. The logic behind the webix-view was to show to render one the input appropriately according to its type.

Here’s where I’m at http://webix.com/snippet/c1944065

This example certainly clears up many syntax issues wrt to using angular.

How about the stacking logic for a responsive display?

Cheers,

Larry

#4

About responsive display - this is currently not available, but in plans for one of next updates. Fluid layouts - when screen size is not wide enough to fix the elements of horizontal layout, it will move part of elements on next row ( so in above case, the tabview will be placed below the central part of content ).