Solved

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

Posted on 2008-10-06
8
2,075 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
Comment Utility
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
Comment Utility
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
Comment Utility
" 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
 

Author Comment

by:ryan_bender
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
"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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

762 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

Need Help in Real-Time?

Connect with top rated Experts

5 Experts available now in Live!

Get 1:1 Help Now