bootstrap and responsive design

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

bootstrap and responsive design

Björn Molin
Hi

I think the introduction of bootstrap in orbeon 4.0 is great. Now, I wonder if there are any plans to replace form builder's table layout with bootstrap's grid layout. In my opinion, that would be a great improvement in order to support different devices and screen sizes, which is the primary scope for bootstrap as well.

Best regards, Björn
Reply | Threaded
Open this post in threaded view
|

Re: bootstrap and responsive design

Erik Bruchez
Administrator
Björn,

We definitely want to introduce responsive design.

One issue is the current feature of "rowspans", which allows a grid
cell to span multiple rows. This is not supported in Bootstrap (which
uses spans). We are not sure if/how to handle this. Maybe revert to a
table layout if rowspans are used?

-Erik

On Wed, Mar 20, 2013 at 4:05 AM, bjorn <[hidden email]> wrote:

> Hi
>
> I think the introduction of bootstrap in orbeon 4.0 is great. Now, I wonder
> if there are any plans to replace form builder's table layout with
> bootstrap's grid layout. In my opinion, that would be a great improvement in
> order to support different devices and screen sizes, which is the primary
> scope for bootstrap as well.
>
> Best regards, Björn
>
>
>
> --
> View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/bootstrap-and-responsive-design-tp4656450.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> OW2 mailing lists service home page: http://www.ow2.org/wws
>


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws
Reply | Threaded
Open this post in threaded view
|

Re: bootstrap and responsive design

hesos
Maybe this would do the trick? The solution has a table in the spanning div but maybe some good CSS would fix this?

simulating rowspan with bootstrap grid

Cheers.
H.
Reply | Threaded
Open this post in threaded view
|

Re: bootstrap and responsive design

Alessandro  Vernet
Administrator
Hi H.,

Thank you for sharing this. The trick used in this example is to create a sort-of sub-table, putting in a "cell" (e.g. span7) multiple <div class="row">. I think this could work for us; the logic to generate that markup doesn't seem trivial, but we'll take that as a challenge. I added a note to the corresponding issue (linked below), so we don't forget about this by the time we implement it. And again, thank you for the feedback!

https://github.com/orbeon/orbeon-forms/issues/70

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: bootstrap and responsive design

davidof
As a slight aside I've written a CMS called Magneato that uses XForms for page editing. I didn't use Exist but a NoSQL database and Lucene for navigation and search. I've built forms using both Twitter Bootstrap and Zurb Foundation and both are pretty good for laying out XForms. Zurb has a responsive table but I'm not sure if this can coexist with Orbeon. Note that with Zurb you really need to be on IE 9+.

The main thing still lacking (I believe) on mobile devices is the ability for XForms to upload from the device, either images, video or GPS data. I built a demonstration application using Magneato for the International Red Cross and using portable devices in the field and the ability to upload straight off the device was a requirement (the Javarosa project sits in the portable device/XForms space too).

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].