Rich-text Reply

Injected html is being cut off

KO 01-19-17

Injected html is being cut off



Wondering if someone might be able to point me in the correct direction here. Essentially the ask here was to inject a div with link outs to our most popular brands on our "All Brands" page accessed from our homepage(the top portion of this code-block contains some CSS cleanup I have running currently). Luckily we have that existing snippet of code living towards the bottom of our homepage, so I was hoping to re-purpose the same code, except inject it above ALL of our A-Z text links for brands. 


It seems to be working...almost. We are getting cut off about midway down the third row of brand logos. I realize this may ne use-case specific for me and my business, but wondering if someone could take a gander at the code block and see if I am failing somewhere?.


Thank You!


(function($) {

$(window).on("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 150);

/*change title and increase font size*/
$(".h-title").html("SHOP BY BRAND: A-Z");
$(".h-title").css({"font-size":"18px", "padding":"10px"});

/* A-Z Letter Heading, Font color, size and spacing, remove border*/
$(".letterheading").css({"font-size":"18px", "font-weight":"bold", "color":"#0c0188"});

/*Reduce space between shop by brand and letters*/

/*Remove plus and bullet legend*/
$(".boxed tr > td:eq(2)").css({"display":"none", "visibility":""});
$(".boxed tr > td:eq(4)").css({"display":"none", "visibility":""});
$(".boxed tr > td:eq(3)").css({"display":"none", "visibility":""});
$(".plus").css({"display":"none", "visibility":""});

/*hide bullets and plus signs within the list*/

/*Remove Gender & Category Links*/
$("#main-wrap > .info-sec > div:eq(1)").css({"display":"none", "visibility":""});

/*letter subheading - increase size, background color and font color*/

/*pad the letter subheadings*/

$(".brandlist > tbody > tr:eq(0) > td:eq(0) > table:eq(0) > tbody:eq(0) > tr").css({"height":"20px"});
$(".brandlist > tbody > tr:eq(0) > td:eq(1) > table:eq(0) > tbody:eq(0) > tr").css({"height":"20px"});
$(".brandlist > tbody > tr:eq(0) > td:eq(2) > table:eq(0) > tbody:eq(0) > tr").css({"height":"20px"});
$(".brandlist > tbody > tr:eq(0) > td:eq(3) > table:eq(0) > tbody:eq(0) > tr").css({"height":"20px"});

$(".breadcrumbs").before("<div class=\"grd-row grd-spacer-1\"></div><div id=\"hp_brandGrid\" class=\"hp_brandGrid\"><div class=\"grd-row\"><div class=\"hpg-promo-img grd-small-12 grd-columns\"><div class=\"grd-box-1 sb-box\"><ul class=\"hpg-brand-grid clearfix\"><li><a href=\"/converse/category_79\"><img src=\"//\"></a></li><li><a href=\"/dr-martens-shoes/category_6481\"><img src=\"//\"></a></li><li><a href=\"/under-armour/category_951969\"><img src=\"//\"></a></li><li><a href=\"/timberland-shoes/category_11\"><img src=\"//\"></a></li><li><a href=\"/the-north-face/category_4748\"><img src=\"//\"></a></li><li><a href=\"/toms/category_1253291\"><img src=\"//\"></a></li><li><a href=\"/birkenstock-shoes/category_142\"><img src=\"//\"></a></li><li><a href=\"/new-balance-shoes/category_88\"><img src=\"//\"></a></li><li><a href=\"/vionic-with-orthaheel-technology/category_4421\"><img src=\"//\"></a></li><li><a href=\"/lucky-brand-shoes/category_4249\"><img src=\"//\"></a></li><li><a href=\"/clarks-shoes/category_105\"><img src=\"//\"></a></li><li><a href=\"/skechers-shoes/category_133\"><img src=\"//\"></a></li><li><a href=\"/dansko/category_4784\"><img src=\"//\"></a></li><li><a href=\"/adidas/category_109\"><img src=\"//\"></a></li><li><a href=\"/rockport-shoes/category_24\"><img src=\"//\"></a></li><li><a href=\"/ugg/category_1074\"><img src=\"//\"></a></li><li><a href=\"/sorel-shoes/category_5374\"><img src=\"//\"></a></li><li><a href=\"/cole-haan/category_563880\"><img src=\"//\"></a></li><li><a href=\"/keen-shoes/category_14\"><img src=\"//\"></a></li><li><a href=\"/merrell-shoes/category_25\"><img src=\"//\"></a></li></ul></div></div></div></div><div class=\"grd-row grd-spacer-1\"></div>");
Level 2

ToddSeller 01-20-17

Re: Injected html is being cut off


I am opening up a support ticket to help you address this issue.
Todd Seller

Platform Certified
KO 01-20-17

Re: Injected html is being cut off

@ToddSeller -- thanks, but I actually was able to figure it out:


the wrapper `<div>` container with class *.grd-box-1* had a manual height set on it and the content overflowed outside of this fixed height. Because there was an *overflow:hidden* property on this as well, we couldn't see the overflowing content. I added CSS to the Experiment CSS that adjusted this container's height to be *auto*


Thanks again for your attention here though

Level 2
ToddSeller 01-20-17

Re: Injected html is being cut off

I'm glad everything worked out! Don't ever hesitate to reach out to support with issues like this.
Todd Seller

Platform Certified