|
August 29, 2007
Positioning Elements on Pages
PeopleSoft makes it easy to design a page. Just drop elements onto
the page and move them around. This works just fine in most cases.
But if you are designing a complex page with very precise positioning
of elements, occasionally you'll run into some trouble. What you see
in App Designer is not always what you get in the browser.
If you do a View Source on the web page, you will see extensive use
of TABLEs for positioning. When this system was designed,
there was probably no better way to do it. What this means for us is
that Tools must look at our page, figure out what we are trying to line
up, and design HTML tables to implement our plan. It's usually very good at
this. But sometimes you may notice that, for example, moving one small
element just one pixel causes the entire page to fly out of alignment.
The most important thing to do in these cases is to try to align elements
as much as possible. Don't just drop things randomly around the page.
Find items that logically relate to each other and line them up. That
simplifies the layout and makes it more likely to render the way you'd
expect. You can use a large grid setting (such as the default 4) to
make this easier, or drag another window over your page and use its edge as
a ruler.
Sometimes the page seems to ignore spacing between elements. In that
case, you can use a "spacer" consisting of a Static Text item (the "A"
on the toolbar) containing a blank space. Put that between the elements.
However, be careful with this. If you move elements as a group (by
clicking the Select Group button, drawing a box around the group and
moving it), it seems that a blank spacer will not move with the group.
This will cause confusion. You move one group and suddenly other
unrelated items on the page get thrown in odd places. The solution is
to leave "X" or some other text in the spacer so that it's visible.
Then, when everything is ready, blank it out.
Be sure that you don't cover a blank spacer with an item
such as a group box. I once "lost" a spacer that way and the page
ended up corrupted. Not sure if that was a fluke or not, but now I'm
more careful with these. To avoid some of these issues, it may be safer to use a derived
field, set it to display-only, and leave it blank.
An easy way to see where things are is to view the page in your
browser and then just click and drag over the page to highlight
everything. Now you'll see the boundaries of each element, including
some of the invisible ones.
Until next time...
|
