Source language: Translate to:

Responsive App Sample

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Responsive App Sample

Postby luishp » Wed Aug 10, 2016 5:03 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Responsive App Sample

Postby luishp » Thu Aug 11, 2016 1:45 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Responsive App Sample

Postby Neosoft Support » Thu Aug 11, 2016 1:30 pm

Nice work Luis! I'll see if your ideas can be incorporated into NAB.
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5602
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 5 guests

cron