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
- 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.
- 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.
- 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"/>
- 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.
- Load the page and check out your changes:
