Howdy! [ Register | Login | Forums ]

Multichannel eCommerce Software
eBay ebay listing scroll bars

Published on March 5th, 2012 | by Matthew Ogborne

20

Do you keep seeing scroll bars on your eBay listings?

Update: There is a workable “Work around” in this article.

When viewing an eBay item, sometimes the description area which is now being placed in a IFRAME tag doesn’t render in the browser page correctly, causing your listing details to only be 200-300 pixels tall and a scroll bar appears on the right hand side.

This seems to happen to both FireFox and Chrome quite regularly for me (probably in Internet Explorer, but I never use it) and to visually explain what I’m referring to a screen shot is below, note the scroll bar on the right hand side:

ebay listing scroll bars

To try and combat this all you need to do is add an style to your style sheet. If you have no idea what a style sheet is, just copy/paste the code below at the very top of your listing in the HTML view and save the changes.

<style type="text/css">
<!-- 
#EBdescription {
     min-height: 4000px; !Important;
}
-->
</style>

This will force your description to be a minimum of 4000 pixels tall. If this is too long for the majority of your listings, try 3000px, then 2000px and inversely if its not tall enough increase this value.

Its not perfect but will at least tell the majority of modern browsers that the height needs to be at least this value and extend the iframe downwards to limit the scrolling.

Have you see this before on your or another listing? Let me know in the comments box below.





Want More Plain-English Advice?

Want more eCommerce tips from Matt learned over a decade of working as, for & with the largest marketplace businesses that are in Plain English delivered to your inbox?

If Yes! Enter your details below:

Your Name:
Your Email Address:
PS. I hate spam more than you

20 Responses to Do you keep seeing scroll bars on your eBay listings?

  1. Do you keep seeing scroll bars on your #eBay #Listings? – http://t.co/5Vpc97uJ

  2. dave p says:

    Could this IFRAME tag also be the reason as to why some of my listing descriptions will render differently? Finding that sometimes I look at one of my listings and the placement of some parts of the page will be incorrect (i.e.an image). I will then refresh the page and it will have the correct layout.

  3. Pingback: That's How You Solve Scroll bars in eBay Listings! - Fix eBay's Duff Code

  4. Martin Ngan says:

    hello,

    thank for your solution, but when i use the upper code, ebay show the following text:

    Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href.

    how can i solve it? Thank you very much.

  5. BlueDot says:

    I was unable to get this working even when adding the following:

    There has to be a better work around. This scroll bar does not show up on one of our templates but shows up on the others. Example can be found here:

    With scroll bars: http://bit.ly/He6L4w

    Without scroll bars: http://bit.ly/GTk9gi

    Any suggestions would be much appreciated.

    • Howdy,

      Yep its always on the second reload.

      Oh wait!

      Look at this:

      <iframe title="Seller’s description of item" frameborder="0" width="99%" vspace="0" hspace="0" marginwidth="0" marginheight="0" height="500" id="d" name="d" src="http://vi.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&amp;sd=3&amp;item=251013699535&"></iframe&gt;>

      Notice the value in bold? That’s eBay SETTING the height!!!

      Can you try this instead:

      .d-iframe #d, .d-iframe .d, .d-iframe iframe {
      height: 5000px !Important
      }

      They should all attach to the same element, but are going about it in diff ways, hoping one will work!

      Matt

      • BlueDot says:

        the suggestion you just posted only makes the scrollable area height – 5000 px. There is still a scroll bar but the scrollable area is now much longer.

        I am so confused as to how I would not see scrollbars in some listings but see them in others?

        I am determined to find a way around this. I have been searching hi and low for over a month now. Of course you contact eBay and they basically say you are on your own.

      • Howdy,

        Put this at the top of your template in the HTML:

        <script type="text/javascript">
        document.getElementById(‘d’).style.height="3000px";
        </script>

        And try that.

        Matt

      • BlueDot says:

        Here are two other ebayers who have been able to bypass the scroll bars.

        http://bit.ly/GWPW4r

        http://bit.ly/GWxZBf

        Can you figure out what they are doing differently? I do not see anything similar to –

        document.getElementById(‘d’).style.height=”3000px”;

        Also – from my understanding, the height element you are referring to will not display properly in older browsers.

        Thanks for your help.

      • Howdy,

        Those two listings you added, refresh them and view the page a second time, bingo scroll bars!

        It appears eBay are adding the height element to the iFrame on the second page view.

        You’re right, the JavaScript to set the height using getElementById() will unlikely work on older browsers, but keeping it real, if you check http://www.w3schools.com/browsers/browsers_stats.asp and drill into the browsers most are kept up to date by 1-3 versions behind the current version and its not a big problem as it used to be. Rather the issue is having a solution that works on IE, FF & chrome for a couple of versions.

        Matt

      • Howdy,

        I’ve found it!

        Its in eBay’s own JavaScript in ThinView. Will post as soon as I am free from the call I’m on.

        Matt

      • BlueDot says:

        I added the Javascript you recommended and I am still not having any luck.

        Listing can be found here – http://bit.ly/GTu7hC

        Got anything else up your sleeves? Were you able to check out the links for the other ebayers listings I provided where the scroll bars are not showing?

        I am determined to find a way to make the scroll bars go away.

      • Howdy,

        If you use FireFox to view your listing, you’re able to right lcik in your description area and then view the frame only, now this is something I had been aware of for a while, but not put 2 & 2 together.

        In the ending part of the URL there is this:

        ?pt=Cell_Phones&hash=item256e62b4af#ht_2237wt_1396

        Note the end parts for ht_ and wt_, this is the height AND width! hese are being set from the ThinView functions at the bottom of the listing page that eBay inserts using the self assigned function() “ifr.setData” which is obviously having issues returning the correct screen size back on the 2nd/3rd views.

        The function is this:

        ifr.setData = function (pSize, callerId) {
        var oCl = ifr.browserDetect();
        var h = pSize[0];
        var w = pSize[1];
        var re = new RegExp(‘^http\://cgi\.’);
        var re2 = new RegExp(‘^(http\://www\.)([a-z]{2}\.)?([0-9a-z]{5}\.)?([a-z]{2}\.)?([a-z]{4}\.)([a-z]{3}|[a-z]{2})(\.[a-z]{2})?(/itm/)’);
        var re3 = new RegExp(‘^http\://vi\.’);
        var rf = window.document.referrer;
        if (oCl.bSafari) {
        if ((rf.toString().match(re) !== null) || (rf.toString().match(re2) !== null)) {
        parent.location.replace(rf + ‘#ht_’ + h + ‘wt_’ + w);
        }
        } else {
        if (rf.toString().match(re3) !== null) {
        parent.frames[0].location.replace(sUrl + ‘&c=’ + callerId + ‘#ht_’ + h + ‘wt_’ + w);
        }
        }
        };

        The issue is as I mention that this function is return 500 or 548 incorrectly and it IT IS an eBay issue with their code.

        Now this is a touching on naughty as it could be classed as site interference and eBay could get lerry about this, so by adding the following function is done are your own risk.

        window.onload = setTimeout(function() {RelaodIt()}, 5000);

        function RelaodIt(callerId) {
        var oCl = ifr.browserDetect();
        var h = 2500;
        var w = 1300;
        var re = new RegExp(‘^http\://cgi\.’);
        var re2 = new RegExp(‘^(http\://www\.)([a-z]{2}\.)?([0-9a-z]{5}\.)?([a-z]{2}\.)?([a-z]{4}\.)([a-z]{3}|[a-z]{2})(\.[a-z]{2})?(/itm/)’);
        var re3 = new RegExp(‘^http\://vi\.’);
        var rf = window.document.referrer;
        if (oCl.bSafari) {
        if ((rf.toString().match(re) !== null) || (rf.toString().match(re2) !== null)) {
        parent.location.replace(rf + ‘#ht_’ + h + ‘wt_’ + w);
        }
        } else {
        if (rf.toString().match(re3) !== null) {
        parent.frames[0].location.replace(sUrl + ‘&c=’ + callerId + ‘#ht_’ + h + ‘wt_’ + w);
        }
        }
        };

        After 5 seconds or so the inner frame source will reload with the forced values of 2500 for the height and 1300 for the width. Happy days.

        But you use at your own risk and this WILL cause a double reload of the listing frame.

        A better approach would be to try and hijack the vars or functions being used in the thinview section, so that incorrect values are not sent OR to highlight this issue to eBay.

        Matt

      • The file is here just incase the comments system has killed it

        http://lastdropofink.co.uk/clients/reloadframe.zip

        Matt

      • BlueDot says:

        I still do not understand how some of my listings will change the height and some will not? This is so odd?

        Can you happen to see how the other ebayers or how my other listing I provided examples for are able to resize without the need for the javascript? There must be something I am overlooking and it is driving me insane.

      • Howdy,

        This happens to pretty much all listings regardless of site, it happens here on the eBay.co.uk domain too.

        The values that are being passed back from eBay’s script to set the height/width of the page are sometimes incorrect and it’s happening inconsistently. Typically the first page view is fine, it calculates the height/width OK, but on the 2nd/3rd page views its returning incorrect values where it cannot work out the height properly and thus we get scroll bars.

        It’s 100% an eBay issue, I’ve tried debugging the code (its beyond my skills to solve it properly), but I’m 100% sure it’s related to this function “ifr.getSize = function ()“.

        The code I suggested in the last post should solve this, because it will reload the entire iframe with forced height and width values, but its hardly ideal.

        Matt

  6. Do you keep seeing scroll bars on your #eBay #listings? http://t.co/wxqkwwSB <= Just posted, a snippet to solve it

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑

More in eBay, How To Guides, Market Places (80 of 233 articles)
eBay Your Shopping Universe


eBay is launching a new TV campaign tonight on 3 channels, seeing as I tend not to watch TV at all (have ...