Changing layout of Details page?

Archived from the Xataface Users forum.

zopemgr — Wed Apr 19, 2006 6:13 pm

Hello,
First off, thanks for Dataface, its a really cool application. What I’d like to do is customize the layout of the Details page. There are times when the vertical, 1 field in a row, default layout isn’t very practical. (Ex. - Say I have two fields for times… it would make more sense to have them side by side instead of vertically). However, I haven’t been able to find where to change this.
Can you shed any light on my situation?

Thanks!
Eric

shannah — Thu Apr 20, 2006 9:07 am

OK.. I had to try this out before posting.

Version 0.6.0 will allow you to easily define a different layout for details mode. For 0.5.3 you have to do a little bit of stylesheeting.

Follow these steps to be able to customize the layout:

  1. Open the file Dataface/templates/Dataface_QuickForm_element.html and change the first line to:

    Code: Select all

    You are just adding an ID to the div tag so that we can reference it using CSS.

  2. Create a directory named “templates” in your application folder and create a file named “head_slot.html”
    Your directory structure will now look like:

         /path/to/your_apps  
                 +------/templates  
                     +---------/head_slot.html

    The contents of the head_slot.html file will automatically get rendered in the portion of the Dataface web pages.

  3. Create a stylesheet named “styles.css” in your application directory. And add the following. For this example, assume you have a FirstName field and LastName field that you want to have displayed side by side:

    Code: Select all
    `#FirstName-wrapper {
        display: inline-block;
        width: 200px;
    }

    #LastName-wrapper {
        display: inline-block;
        width: 200px;
    }`

    This just tells the browser to render the FirstName and LastName fields inline instead of as blocks. It also sets their widths so that they can fit nicely.

  4. Finally add the following to the head_slot.html file to import the stylesheet you just made:

    Code: Select all

Hopefully this helps. Let me know how it goes.

Best regards

Steve

zopemgr — Thu Apr 20, 2006 2:50 pm

Fantastic, thanks for your help!
I’m at work and can’t try it right now, but I will check it out when I get home.

Thanks again!
Eric