Results 1 to 5 of 5

Thread: Centering Form Items using CSS

  1. #1
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,948

    Centering Form Items using CSS

    I have 5 formitems stacked in a form section.

    I would like to center these forms items in the section.

    I've tried this (in the stylesheet for the section):

    Code:
    lianja_ui_section_formitem {
    width: 350;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    }
    but no joy.

    thanks,

    Hank

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771
    Form sections are specifically designed to lay out their contents (Formitems and Gadgets) for a responsive UI so that they occupy space irrespective of the geometry of the viewport.

    Trying to use CSS to override the behavior of the layout engine will not work.

    If you want to center a form section (You did not not mention so I am making an assumption here), the way to do it is to use dividers. One on the left and one on the right.

    The layout engine will then layout the form section as three equally sized "columns" with your formitems in the middle.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  3. #3
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,948
    Quote Originally Posted by barrymavin View Post
    Form sections are specifically designed to lay out their contents (Formitems and Gadgets) for a responsive UI so that they occupy space irrespective of the geometry of the viewport.

    Trying to use CSS to override the behavior of the layout engine will not work.

    If you want to center a form section (You did not not mention so I am making an assumption here), the way to do it is to use dividers. One on the left and one on the right.

    The layout engine will then layout the form section as three equally sized "columns" with your formitems in the middle.
    I've used columns to divide the form section into 3 parts. The downside is that when the form section shows half-wide, the formitems are now 1/6 of the original form width.

    The margin: 0 and margin-left: auto, etc., is specifically designed for responsive ui, to center objects in the middle of the display space. With this concept, the formitems can remain their designed size right down to their width (if it's been set). This for the most part shouldn't be an issue with desktop or browser displays, but I would think having the dividers on each side would cause the UI display to suffer when moved to mobile.

    Anyway, onward,

    Hank

  4. #4
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771
    Yes I know what the CSS does but the layout engine overrides CSS positioning.

    The Mobile client has its own layout engine and lays out UI elements depending on if the have been checked as "Mobile". This allows one App to function on different devices.

    Adding a gadget "Component" with a fixed width with two dividers either side may do the trick,
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  5. #5
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,948
    Quote Originally Posted by barrymavin View Post
    Yes I know what the CSS does but the layout engine overrides CSS positioning.

    The Mobile client has its own layout engine and lays out UI elements depending on if the have been checked as "Mobile". This allows one App to function on different devices.

    Adding a gadget "Component" with a fixed width with two dividers either side may do the trick,
    Ah, thanks.

    Now, if a column divider would be "fixed width" (or not), the two on the sides could be made "not" and the issue would be handled, also: don't know how feasible this is.

    thanks,

    Hank

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us