Rick Strahl's Weblog
Rick Strahl's FoxPro and Web Connection Weblog
White Papers | Products | Message Board | News |

Absolute Positioning Layout with Web Connection and Visual Studio


1 comment
June 02, 2007 •

When using Visual Studio for layout with Web Connection (or ASP.NET for that matter) you can choose to use a non-default layout mode called Absolute Positioning. Absolute positioning basically uses an X,Y layout coordinate system to lay out controls so you can easily arrange controls at fixed positions in the layout. This seems very attractive especially to developers coming from desktop applications.

 

However, before you rush into developing interfaces this way you should realize that Absolute Positioning layout is strongly discouraged for Web Connection especially, but also for ASP.NET. The are a couple of reasons for this both practical from an HTML perspective and from a toolset perspective.

 

On the practical level pure positional layout tends to be very Web unfriendly. Web Browsers are built primarily around the concept of flow layout. Flow layout is the default layout system for HTML in when elements basically butt up against each other and need to be separated through various HTML containers or breaks induced with HTML markup. Flow layout has one main advantage in a Web browser such as automatically resizing itself to fit the size of the window or container. Most Web content you use day in and day out is based on Flow layout.

 

Absolute positioning is available in recent browsers and is part of the CSS specification. It’s hardly an outcast and in fact it plays an important role today in rich AJAX based Uis to allow animation of controls and containers in the browser. However, as a complete layout mechanism – that is laying out all elements with positional x,y coordinates is not optimal in Web Browser applications.

 

First consider that unlike desktop applications Web forms tend to be dynamic in size. The window that hosts the application (the browser) tends to be resized constantly – there’s no fixed size for the main browser window for example. So if you design a form layout that’s set up at a specific fixed position in the HTML layout you’ll end up with a layout that ends up maybe in the upper left corner of the browser. Or if the user has a very low resolution display you might end up with a display that completely that only displays a small portion of your interface requiring extensive scrolling to do anything. These issues are often easily managed by Flow layout but don’t do well with absolute positioning

 

The biggest problem with pure absolute positioning of all output is that it requires fixed sizes – content doesn’t adjust itself. While fixed layout works reasonably if all you do is built form based interfaces that display input boxes and the like, it works horribly if you have any sort of dynamic content like text of varying sizes (that you want to display as HTML) or even a more complex control like a data grid. What happens in those scenerios is that you have to very carefully deal with the overflow text that doesn’t fit in the size of the container which can get very complex quickly. Imagine for example a data grid that has items to display. Now imagine that a few of the items don’t fit into their respective columns causing the text to scroll to the next line which in effect now resizes the Datagrid and makes it bigger. If other controls were laid out with absolute positioning underneath the datagrid you now have the datagrid content bleeding into these controls. Basically anytime there’s any unintended overflow it gets very tricky to manage that overflow.

 

The other issue is tool support. Visual Studio 2005 is not really optimized for absolute layout. It’s supported but you may note that it’s not real obvious to switch the mode and that was done for a reason <s>. The other issue is that even in ASP.NET many controls don’t work quite consistently with absolute layout. This especially true for third party controls which often make no attempt to work with absolute positioning.

 

In Web Connection’s Web Control framework it’s similar. The base controls support absolute positioning but there’s not been an extensive amount of testing into this. Some controls – like the RadioButtonList for example – don’t work very well with absolute positioning because it actually relies on flow semantics to lay out the radio buttons properly. Similiarily a datagrid in flow layout is probably not going to give you the results you are expecting in absolute display mode.

 

Absolute positioning has its place and it’s a great tool for snazzing up HTML content but only as an add-in feature that gets enabled on the UI once the UI is active or for certain specialty situations. For example, absolute positioning can be a great feature for filter selection boxes or status displays that need to be pinned to a corner of the browser window for example. But typically even in those scenarios you’d really want to limit the absolute positioning to the container that hosting standard content.

If you are considering using posititional layout, I’d recommend thinking it over. I realize that many desktop developers are not comfortable with HTML flow layout and there’s no doubt that it’s more work to layout forms based layouts using this mechanism, but in the long run you will likely have fewer odd problems that you will have to work around with your UI, and you can feel good about the fact that you’re following standard Web practices, rather than an unconventional shortcut.

Posted in:

Feedback for this Weblog Entry


Re: Absolute Positioning Layout with Web Connection and Visual Studio



Ken Moss
February 09, 2008

I think this may be true for commercial sites, but I've created several 200+ page sites for internal use by government agencies. I've found that the absolute positioning works fine since all our users either use IE 6, IE 7, or Firefox. The sites have been in production over a year now and it works seamlessly. I even use infragistics extensively on the site and it works great.

The main reason I chose this is to get the project out fast. I don't have time to mess around with flow layouts when I have a couple of months to churn the application out. I can get a page out really quick using absolute positioning. I've designed the screen to a standard 800 pixels wide so it looks decent on those that are using 600x800 resolution.

I've come across this advice you give above time and time again--but I don't agree at all when you are doing internal data entry sites. I structure my web apps to be similar to a windows app and the perform extremely well plus I can get them out the door in no time at all.

Ken Moss MCSD, MCDBA, MCAD, MCSA

 
© Rick Strahl, West Wind Technologies, 2003 - 2024