Responsive Design Triggering in Desktop

We are having an issue where responsive design actually triggers in lower resolution in desktops. The screenshot below is taken when a form is edited in a browser window with the size of 1024 x 576.


Is there a way to alter or configure this behavior to at least trigger at a much lower resolution?

Kind regards
Kris

I agree that it's not great. We had an issue to track this:

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

However it seems that we decided not to address it fully, although we fixed a font issue.

There is a CSS class, .xforms-mobile, which could be used to change that behavior with the appropriate CSS.

-Erik

Hi Kris,

Specifically about the responsive CSS switching to a one column layout, this should happen if the viewport width gets to 980px or less, at which point there is not enough space to show the form without horizontal scrolling.

The option being between forcing users to use horizontal scrolling or showing the form in one column, we thought the second option was better, whether you're on a mobile or PC.

And since 980 < 1024, even on a low 1024x768 screen, the full form will show, assuming the browser window isn't made to be even narrower than the screen. Does this make sense, or would you prefer some other behavior?

Alex

Hi all,
  I've just been working on this (I work with Kris) and have come up with some CSS to configure the form viewer in a way that suits our application. Our requirements are to display a form within our web app where a menu and document list take up 522 pixels of the left side. That leaves 502 pixels for a form on a 1024 wide screen and 758 on a 1280 wide screen.

What we wanted was a single column for the 1024 wide screen (i.e.  the mobile view) but multi column for 1280 or wider. We also want to allow forms that are wider than 980  to use the whole width of the screen (we can also edit/view forms in a full width view if the user wants to).

I've come up with the following CSS to get this to work, this might be helpful for others trying to change the layout to their requirements.

/************************************************************/
/* Override the default width behaviour. The Orbeon default 
   is a 980px maximum width under which it switches to a 
   single column responsive view. I want to set the switch 
   over to single column to a 720px width and remove the maximum 
   width setting entirely. */

.orbeon .span12, .orbeon .fr-view {
	width: auto;
}

@media only screen and (min-width: 720px) and (max-width: 980px) {
  .orbeon .fr-grid:not(.fr-repeat-table) {
    table-layout: fixed;
  }
  .orbeon .fr-grid:not(.fr-repeat-table) > tbody > tr > td {
    display: table-cell;
  }
}

the @media setting between 720px and 980px is to override the built in @media setting for max-width of 980px.

This is in a css file included using the usual property setting

<property
        as="xs:string"
        name="oxf.fr.css.custom.uri.CPF.*"
        value="/forms/CPF/assets/stylesheet/udr-xforms.css" />

Hi Brian,

Thank you for sharing!

Alex