I want to use a form and radio buttons to refresh a page inside a floatbox. The whole page is written in PHP so the form part of it looks like this:

echo "<form action=\"#\" method=\"get\" id=\"currency\">";
echo "<tr><td colspan=\"6\">Currency: 
<input name=\"currency\" type=\"radio\" value=\"e\" ".$echeck." onClick=\"this.form.action=&#039;/book/book1_ajax_new.php&#039;;this.form.submit()\"> Euros 
<input name=\"currency\" type=\"radio\" value=\"p\" ".$pcheck." onClick=\"this.form.action=&#039;/book/book1_ajax_new.php&#039;;this.form.submit()\"> Pounds 
<input name=\"currency\" type=\"radio\" value=\"d\" ".$dcheck." onClick=\"this.form.action=&#039;/book/book1_ajax_new.php&#039;;this.form.submit()\"> US Dollars
</td></tr>";
echo "<input name=\"hid\" type=\"hidden\" value=\"".$hid."\">";
echo "<input name=\"ArrDate\" type=\"hidden\" value=\"".$ArrDate."\">";
echo "<input name=\"DepDate\" type=\"hidden\" value=\"".$DepDate."\">";
echo "<input name=\"roomtype\" type=\"hidden\" value=\"".$roomtype."\">";
echo "<input name=\"room_id\" type=\"hidden\" value=\"".$room_id."\">";
echo "</form>";

Temporarily I am using this line at the top of the page to check if the page refreshes with the new value for "currency".

echo $currency;

It works perfectly when it is a standalone page in the browser, but it doesn't work in a floatbox. Is there any obvious reason for this? Is there any way of overcoming it?

Quoting server-side php code is of no value. Floatbox is entirely client side and I need to see the live page to be able to determine what is going on with it.

In general, if you load a form as an iframe in a floatbox, then any submit results will return back to that iframe in the floatbox. If the form is loaded as ajax or from a hidden div, then form submit results will return back to the main page.

My long weekend turned out to be longer than expected, so I've just got back to this topic.

My original way of loading the floatbox (actually a tooltip) did use ajax:

<img src="../images/price.png" width="22" height="25" class="fbTooltip bookajax" data-fb-tooltip="type:ajax source:`book1_ajax.php?room_id=<?php echo $room_id ?>&ArrDate=<?php echo $ArrDate ?>&DepDate=<?php echo $DepDate ?>&hid=<?php echo $hid ?>`">

I changed to iframe like this

<img src="../images/price.png" width="22" height="25" class="fbTooltip bookajax" data-fb-tooltip="source:`book1_ajax_new.php?room_id=<?php echo $room_id ?>&ArrDate=<?php echo $ArrDate ?>&DepDate=<?php echo $DepDate ?>&hid=<?php echo $hid ?>`">

but the problem now is controlling the size of the tooltip.

The ajax version autosized so always fitted the content. The iframe version makes a very large floatbox, far too large. I can statically control the size with "height" and "width" but the size of the content is variable. I know about the problems of sizing iframes, but that is why I wanted to avoid them. Is there any way of getting round it?

I'd have to see the page live to determine why measuring of the floatbox content is getting size values that you don't consider appropriate. Can you link me to an example page?

Also, please make sure you're using the latest Floatbox version. Auto-sizing of same-domain iframes has always been a challenge and has been improved in recent versions.

My current active page is accessible by going to www.littlehotels.co.uk/spain/colorado.php. Then put some dates in the booking panel and click "Enquire or Book". On the following page, hover over one of the currency icons. This page is using Floatbox 5.something and the tooltip content is loaded with ajax.

My test page is accessed by going to www.littlehotels.co.uk/spain/colorado_currency.php. Follow through the booking panel in the same way. This page uses Floatbox 6.0.3 and the tooltip content has "type:ajax" removed so is presumably being loaded as an iframe.

The currency radio buttons work properly on the test page (that's what I'm trying to achieve). They don't work in the current pages for the reason admin has already explained. My problem now is just how to get the tooltip to size itself to the content.

We can load the iframe source directly outside of a floatbox and see what's going on with its default sizing, like this.

It's as tall as the browser window and this is due to height:100% being assigned to both the body and html elements in lines 2 and 3 of the page's css.

That's a big step forward. I've just made a special test css file without those two 100% height settings and that has solved the height issue. I still have a problem with the width which I will have a play around with.

You almost always have to constrain the width in some way and not count on it being measured. An easy way is to just set the desired width in your tooltip options and then let the height flow to whatever it needs. You could also set the width somehow on the content page using your css.

HTML is horizontally fluid and adaptive if not constrained somehow width-wise. It's not possible to set the width of a container to the width of the contained HTML because the HTML flows to the size of the container. We're asking for the container width to size to the HTML, and for the HTML to size to the container width. All possible widths satisfy this and so no single "real" width can be determined.

Set a desired width please.

The problem I have is that the content of the tooltip is a table and I don't know high or wide the table will be.

For the moment I have set the height by putting a couple of lines of CSS into the head of the page setting the height of <html>and <body> to 10%. It then just expands to the true initial height of the page. I know I could change the main CSS file, but I don't want to get bogged down in all the testing to make sure it doesn't break anything anywhere else on the website.

I have set the width to 450 in the data-fb-tooltip which seems to be OK but leaves a lot of whitespace when the table is narrow.

Is it possible to use one of the iframe auto-resize scripts with Floatbox? Then I could get the width a good fit every time and the height would also resize when the content is changed by the javascript (just a couple of extra lines so I am covering that at the moment by putting in two empty lines when necessary).

Consider going back to loading that table into the tooltip as ajax. And of course the ajax source should not have a doctype nor html, head and body elements. It should just contain the table. Then it will likely auto-measure for you with ease. Bringing in an iframe brings in a body element, and body elements naturally flow to fill 100% of available width, hence aren't measurable in a meaningful way.

That will work, because that's where I started! But then the results of the form submit go to the parent page and not the tooltip.

I'll have to look to see if I can modify the content of the tooltip with javascript instead of using an HTML form.

All that just to avoid assigning a width.

If you center the table, a little extra width around it probably won't look awful.