Pages

Pages

How to make fields display inline

By default Xataface lays out its forms so that the fields are easy displayed on their own line. This how-to explains how to make certain fields show up on the same line.

Xataface lays out form fields as blocks so that each field occupies a line of its own.  This is preferable most of the time, but sometimes you may want two or three fields to show up on the same line (e.g. FirstName, LastName, Initial).  Currently there are no config options that will allow you to do this, however it can be achieved with some small template changes and stylesheets.
Now suppose we have a table named "Profiles" containing the following fields.

  • FirstName
  • LastName
  • Initial
  • Phone
  • Description
And we want FirstName, LastName, and Initial to all be displayed on the same line. 

Procedure

  1. If you are using Xataface 0.5.3r2 or older, you will need to download a patch so that Xataface will apply an ID attribute to the DIV tag that wraps each field on the form.  To find the version of Xataface, check out the version.txt file in the Xataface directory, or load the dataface_info.php page in your web browser.  The patch can be downloaded at http://sourceforge.net/tracker/index.php?func=detail&aid=1488996&group_id=153729&atid=788934.
  2. Create a directory named "templates" in your site's directory.  You are able to override any Xataface template by placing a file of the same name in this directory.
  3. Inside the templates directory that you just created, create a file named "head_slot.html".  The contents of this file will be included in the "head" section of your application web pages, so it will allow us to create a custom stylesheet.  Inside this file, place the following contents:
    <link rel="stylesheet" type="text/css" href="styles.css"/>
  4. Create a stylesheet in your application's site directory named "styles.css".  This is where you will introduce your custom styles.  Add the following style declarations inside this file:
    #Profiles-FirstName-wrapper, #Profiles-LastName-wrapper, #Profiles-Initial-wrapper {
    float: left;
    width: 33%;
    }

    This stylesheet essentially says that the FirstName, LastName, and Initial fields in the Profiles table should be laid out each with a width of 33% of the form width and side by side.

  5.  Load the page and check out your changes:
    inlinefields.gif


Powered by Xataface
(c) 2005-2025 All rights reserved