Responsive App Sample

[luishp]

I have found how to achieve a really Responsive App.
All the trick is in CSS.

Please take a look:
http://sinlios.com/neoappbuilder/responsive-test

Source code:
http://sinlios.com/neoappbuilder/responsive.zip

Regards.

[luishp]

I have had some more time to work with responsive apps in NAB.
Although Bootstrap (included into NAB) has a responsive grid system, all my previous attemps to use it directly in NAB were not succesfull.
Finally I have found how to use it with some workaround.

This is a more elaborated responsive example made in NAB:
http://sinlios.com/neoappbuilder/responsive-test2

Source:
http://sinlios.com/neoappbuilder/responsive2.zip

To understand what I have made you will need some CSS knowledge (not much) and to know a bit about Bootstrap grid system:
https://scotch.io/tutorials/understandi ... rid-system

If you go to Project->Properties->Styles you will see this CSS code:

Code: Select all

body{
  overflow-x:hidden!important;
}
#NewPage{
  overflow:visible;
}
.container{
  margin:20px;
  padding:10px;
  position:static!important;
  height:auto!important;
  width:100%!important;
}
.row{
  position:static!important;
  height:auto!important;
  width:100%!important;
  padding:10px!important;
}
.col-sm-6{
  position:static!important;
  padding:15px;
}
.col-sm-12{
  position:static!important;
  padding:15px;
}

All the CSS clasess I have used are predefined in Bootstrap, but I have added some more atributes as Bootstrap grid does not work with "position:absolute" elements as NAB does.
Working this way it is possible to take advantage of the Bootstrap grid system although NAB fails locating elements into the working area. Anyway it is perfectly possible to work this way using the objects panel to select objects.

[Neosoft Support]

Nice work Luis! I'll see if your ideas can be incorporated into NAB.