Searchbox iframe resizing and styling depending on Javascript

JavaScript
1

Hi everyone, my website www.sntravel.co.uk has a iframe with a searchbox pulling from a backoffice system.

First of all it’s giving me an error jQuery not defined but anyway it works.

The problem is restyling it as there’s a javascript controlling the iframe size.

It has 3 types of iframe which change depending on the radio buttons and pull from SIDs which have a different type of search

2

Hi,

In what way is restyling it not working?
What are you trying to do and what is happening?

3

Hi pullo, modifying the actual size and position of the frame is not possible. It wont get bigger and taller once you select different voices stick as children or number of rooms.
I wanted to make a bigger banner and have the search box on top changing responsively depending on the screen size

4

In sn.css line 432 you have:

iframe#searchformframe {
  height: 375px !important;
  padding: 10px 0 0 10px;
  border: none;
}

Try removing the height declaration, or changing it to min-height.

5

Ok I changed that but it has this annoying scroll bar there, what is the javascript actually doing anyway? Not sure how to check it

6

What JavaScript?

7

I was told by the company owning the website that this regulates the size:

 <script type="text/javascript" src="/ssi/searchframe.js"></script>
 <script type="text/javascript">
monitoriframesize('searchformframe','tabform',1);
</script>
8

Yeah, that seems to be the case.

The best thing to do now is to make a small, self-contained example which demonstrates this problem.

This ideally involves stripping out all unnecessary components (styles, content, JS) until you have as few lines of code possible, which demonstrates the issue you are having.

9

Hi Pullo sorry for the delay.
How can I do that?

10

When I checked again this morning, the problem no longer occurs for me.

In the past, if I went to your page and changed 1 room to 3 rooms in the search box on the left-hand side, the search form would adjust accordingly and overflow its parent container.

Now when I do that, the parent container expands to accommodate it.

Did you change something?

11

I reverted some changes and it looks like it works but what I wanna do is something different.

Basically I want to limit the search form to a few essential elements and when they choose that have a text saying advanced search that expands it like it is now.

Is that possible?
Having a big search is a deterrent for customers and they don’t search often also because of that.

12

Yup. This is sometimes known as choice paralysis

I would guess so.
However, it probably depends on the script you are submitting the form to.

13

How would I find which script is responsible?

14 
<form action="/fusion/start.pl" ... ></form>
15

It’s one of their scripts I guess, how do I change the behaviour?

16

Do you have access to it?

17

Hi Pullo, sorry was on holiday.

No I don’t, but can ask them to change stuff

18

Hope you had a nice break.

Then that’s what I’d do.

19

Hi, I cant tell them to change stuff, they wont do that. I need an exact code for them to change it. What is the.pl form ?

20