[HOW TO] "Squish" the View Tab's field layouts.

A place for users and developers of the Xataface to discuss and receive support.

Postby Aoirthoir » Thu Nov 16, 2006 1:01 pm

For us, the space between each field was a little too much and required a great deal of scrolling. Well changing it is incredibly easy.

First you need to copy the file /path.to.dataface/Dataface/templates/Dataface_View_Record.html to path.to.your.dataface.app/templates folder. Then edit the file that is in your app/templates directory (not the original Dataface template). Look for the following lines:



What you are looking for there is the PADDING and the MARGINS. I usually set both to 0. However in this case for the .record-view-table class (classes in CSS are preceded with a dot) I leave the margin-top: 1em; setting. This way the entire block will be slightly below the tabs bar, giving the nice look that Mr. Steve originally set up. The rest of the paddings should be changed to 0 this way:

padding: 0;

giving you a result similar to this:


.record-view-label {
text-align: right;
vertical-align: top;
font-weight: bold !important;
padding-right: .5em;
width: 25%;


.record-view-value {
border-bottom: 1px solid #ccc;
padding-left: .5em;
width: 75%;

.record-view-table {
border: 1px solid #8cacbb;
width: 95%;
margin-top: 1em;


You will note some of the things I commented out. For instance I am also changing the colors. So that I dont lose the original, I go ahead and comment them out in this version of the file. This way I can set it back in an instant if I need to do so, without having to reference the original Dataface_View_Record.html template.

Also you should notice that I do not have padding: 0; as mentioned above. Why not? Well in CSS, with the paddings at least, they are automatically 0. So if you do not set them, you have already set them to 0. Also I have added padding-right: .5em and padding-left: .5em for field labels and field values respectively. This pushes my data away from the descriptors slightly.

Using that bit of code you can modify anything within the form. Though my preference is to pull all of that out and store it in a seperate custom.css styles file.

Thank you kindly.
Posts: 420
Joined: Wed Dec 31, 1969 5:00 pm

Return to Xataface Users

Who is online

Users browsing this forum: No registered users and 3 guests

Powered by Dataface
© 2005-2007 Steve Hannah All rights reserved