Skyscanner widget cutting part of the widget off

[damessential]

Hi team,

I am having trouble displaying the whole skyscanner widget on my website.

The calendar search is being cropped from view with the widget: http://www.damessential.com/flights.html

Any suggestions?

Thanks

Sam

[Adam7]

It looks like the Skyscanner scripting isn't able to figure out a height it needs. You might need to customize the code a little bit in order to specify a height. Does Skyscanner provide any assistance with their widget? They might be able to tell you what you can add to the code to resolve it.

[damessential]

Hi @Adam

Thanks for the quick response.

Weebly provide some documentation but only advise on how to change the width and when I tried to change the width the widget didnt change..

Here is my current code:

<div data-skyscanner-widget="SearchWidget" data-locale="en-GB" data-affiliate="network:CJ;publisher:8060944;market:AU"></div>
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

Here is a skyscanner link to the code editor:

https://partners.skyscanner.net/affiliate-search-widget?publisher=8060944&network=CJ&locale=en-GB&ma...

Skyscanner suggestion to changing width and height:

<style> 
div.widget { 
    width: 250px; 
} 
</style> 

<div class="widget"><div data-skyscanner-widget="SearchWidget" data-locale="en-GB" data-affiliate="network:CJ;publisher:12345678;market:GB"></div>
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

If you could help that would be great as I am at a loss right now. 

Cheers

Sam

[Adam7 · Accepted solution]

Strange that they don't actually mention what to add for the height even though they have that as part of the FAQ question. I'm guessing they want you to do something like this:

<style> 
div.widget { 
    width: 250px; 
    height: 700px;
} 
</style> 

<div class="widget">
<div data-skyscanner-widget="SearchWidget" data-locale="en-GB" data-affiliate="network:CJ;publisher:12345678;market:GB"></div>
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

[damessential]

Thanks @Adam legend!

[Adam7]

Glad to help!

[damessential]

Hey again @Adam the widget is working pretty well but I have noticed some extra blank space showing below the widget which I cant seem to get rid of... do you have a suggestion? I tried adjusting the height of the widget but this did not change the blank space below the widget. 

http://www.damessential.com/flights.html

[Adam7]

That page looks a little different in the editor than it does on the live site. Can you try re-publishing so those changes are live (if you're ready to, that is)?

[damessential]

Thanks for the quick reply @Adam the site has been republished, although I don't think this makes any difference in the appearance. 

[Adam7]

Oh, it looks like you're missing a </div> tag in your embed code. It should go before the <script></script> code.

[damessential]

Hi @Adam I'm not sure that's it as there is a </div> already in place..unless I am missing something really obvious..

Here is the current code..

<style>
div.widget {
width: 250px;
height: 500px;
}
</style>

<div class="widget">
<div data-skyscanner-widget="SearchWidget" data-locale="en-GB" data-affiliate="network:CJ;publisher:4736216;market:GB"></div>
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

Thanks again for your help! I owe you a beer if you're ever in Amsterdam