Solved

Is there a way to auto-adjust a frame's size to fit it's content?

Posted on 2008-10-06
8
2,091 Views
Last Modified: 2012-05-05
I have a web page with two frames split into a smaller top frame and a larger bottom frame.  The top frame contains a form that allows users to query a database.  The bottom frame contains a blank space that displays the results of that query.  Pretty simple.

I've run into a problem of sizing the top frame to perfectly fit the form it contains, so I can give the maximum amount of space to the bottom frame.  The point is to eliminate any white-space on the page.  

Originally, I had a fixed pixel count for the top frame and gave the bottom frame the rest of the space.  Like this:  <frameset rows='185,*' frameborder='no' border='0' framespacing='0'>

This works most of the time, but often it will be out of proportion.  There are so many browsers types and configuration that this method isn't always successful.  

I've also tried using a percentage measurement.
Such as: <frameset rows='70%,*' frameborder='no' border='0' framespacing='0'>

I've also tried using relative measurement.
Such as: <frameset rows='*,*3' frameborder='no' border='0' framespacing='0'>

Is there any sure fire way to get the portions exactly right every time?  Or is estimating the best chance I have?

Thanks.
0
Comment
Question by:ryan_bender
  • 4
  • 4
8 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22655931
frames and iframes generally need real measurements to work correctly.  If you wanted an exact balance, you would have to count the lines of data coming out of the database, right in the PHP or ASP page that is sending the data, and then adjust the frame height based on the number of lines.  This means that you would be outputting the ENTIRE page again by the ASP or PHP code you are using to get the DB data, hence there would not be any need for frames -- you just reflect the new page structure back to the browser on form submission.

Other than that, 2 things I would do --
1.  Use an iframe for the data instead of a frame.  Frames give search engines a lot of trouble, you get bad site indexing from them.  The main page will be the layout and the form, the iframe would be holder for the content output -- so in your form, you would have ... action="data.php" target="iframe_name" ....

This iframe layout is faster, cleaner and neater, the only problem is you STILL have to specify the height of the iframe, as 100% doesn't work for them.

2.  I would consider a left-right layout.  If your form can be broken into narrow input fields, put it all on the left (frame) and leave the content for the right frame, and give it 100%.  As the data fills up the right side, the left either stays as it was, or gets overtaken by the data -- but the height balance problem is gone.
0
 

Author Comment

by:ryan_bender
ID: 22660044
Thank you for your suggestion.

I understand what you are saying about sending the data twice (it's redundant).  However, I don't think the measurement of the top frame (for querying the database) should be dependent on the number of lines it returns.  It should remain a constant size, even when the database returns nothing, like any menu system (for example, amazon.com or eBay).  Maybe I misunderstood you?

I thought about your suggestion for 2.  It would work, however, I would still have the same problem, but just on the left side.  There will still be browsers that display the layout in different ways (because of a fixed, percentage, or relative measurement).  In addition, I think it works better aesthetically to have the form at the top.  This is because the user will read each line straight across.  This layout gives them more room to do so.  

I'm very interested in the idea you suggested for 1.  Would you elaborate on it?  I'm not sure if this will work or not.  I need the top form to remain at the top of the page even when the user scrolls down through the data. This is so that if a user wants to modify a search while they are digging to the data, they can more quickly enter that information in and resubmit.  Is it possible to do this with the form being apart of the main page (contains the frameset)?  Could you also elaborate on the frame vs. iframe?  I was under the assumption that an iframe was a frame with no dimension.  In this case we want some space so that user can see the results.

Thanks for the suggestions!  It really helps!
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22661341
" Is it possible to do this with the form being apart of the main page (contains the frameset)? "

to keep your form positions inline with the top, center or bottom of the data is almost impossible if the data is a long list.  A person is going to have to scroll to get back to the form entry fields.  So if the form in the left frame is only 300 px high, and the data is 3000px, they will have to scroll up, but it's the same in your example with the form in the top frame.

An IFRAME can have whatever size you give it, but it must have a real PX height and width to work -- percents don't work.  THe advantage of an iframe is that you (1) don't have a frameset to stop SEO indexing, and (2) it looks like part of the page with no border, so it appears integrated.  But if the data is 3000px long, and you specify 1000px height for the iframe, the user will have to scroll with the scroll bars.  

But they are ONLY scrolling the iframe contents -- hence the form is always visible on the page since it part of the main page.  So no matter how much the iframe content is scrolled, the page layout remains in place, including the form.

Try it, it is as simple as specifying an iframe, and then using target="iframe_id" on every link.

<IFRAME id="content" src="data.html" width="770" height="400" frameborder="0" margintop="0" marginbottom= "0" marginheight="0" marginwidth="0" scrolling="1"></IFRAME>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ryan_bender
ID: 22664337
I've got an iframe solution in place.  It works like the previous framed solution I had.  It's cool, because it's simpler and it may have solved another problem that I had previously.  However, there is still a sizing issue.  I can get the width property of the iframe to recognize '100%' as an acceptable value, but I can't get the height property to do the same.  Weird, but not surprising.  Is there any way to get the height of the iframe to extend to 100% of the browser window?  I'm trying to avoid the use of fixed measurements, because it puts me in the same place that I started.  I was reading about how that property is tied to the size of the container object.  I'm not sure what that means, but I'm thinking it relates to adjusting some parent object of the iframe.  Does this ring any bells?  Thanks again scrathcyboy.  This is a huge help!
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22665025
"Is there any way to get the height of the iframe to extend to 100% of the browser window?"

Generally an iframe with percent heights doesn't work, as I said in both posts above.  However, since the ultimate "container" for any element on the page is the ENTIRE page itself -- i.e. the HTML BODY. You can try this -- as long as your form is on the side and the iframe uses the entire height, it might work --

in CSS at top --

HTML, BODY  {width:100%; height:100%; min-width:100%; min-height:100%; }

That tells the page to occupy the entire browser window.  Check it in FIrefox as well as IE, see if OK
0
 

Author Comment

by:ryan_bender
ID: 22669365
I played around with the CSS and it seems that the only way to expand the height of the iframe is to include:

<head>
<style type="text/css">
body{height:100%;min-height:100%;}
html{height:100%;min-height:100%;}
</style>
</head>
<body>
<iframe width="100%" height="100%" name="mainFrame" scrolling="yes" frameborder=0>
</iframe>
</body>

This is good.  However, there appears a height scroll bar for the entire page (rather than just having a scroll bar for the iframe).  I noticed that if you scroll down all the way the query form becomes just out of sight.  It's like it takes the browser window size and extends the iframe to that height.  I guess this is what I was asking for, but it causes the web page to be larger than it needs to be.  I'd like the iframe height to be: (window size - query form).  Any ideas?

Thanks again scrathcyboy!  It's so close!
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22671808
Again, it is your horizontal design.  So therefore play with the numbers, both on the upper frame and lower iframe -- it doesn't HAVE to be 100% -- you can experiment with any value you want.  Remember, the BODY and HTML at 100% simply means, whatever the main page is, it will fill the full extent of the browser window.  Therefore you might leave that, and use iframe height 90%, for example.  Play with the numbers, and don't forget to resize the browser to test, and also try in Firefox as well as IE.  Good luck.
0
 

Author Closing Comment

by:ryan_bender
ID: 31503602
I appreciate the effort, but the iframed solution didn't work out as I had hoped.  I tried having the query frame on the left side, but it ended up worse than when I began.  The time and effort needed to try to make the iframe solution work doesn't seem worth it.  I have a working tool already with a small display problem.  So thank you for your help.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Character counter breaks after adding EmojiOne Area 4 45
output of netstat -r in Powersshell HTML 3 45
How do I show a login page over the login page? 5 38
SVG and IE11 2 17
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question