Rich-text Reply

Injected html is being cut off

KO 01-19-17

Injected html is being cut off

Hello, 

 

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);
});
  
}(window._$));


/*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"});
$(".letterheading").css({"padding-right":"7px"});
$(".letterheading").css({"padding-left":"7px"});
$(".brands_abc").css({"width":"930px"});
$(".brands_abc").css({"text-align":"center"});
$(".boxed").css({"border-style":"none"});


/*Reduce space between shop by brand and letters*/
$(".clearfix").css({"height":"80px"});

/*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*/
$(".plus1").css({"color":"white"});
$(".bullet1").css({"color":"white"});


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

/*letter subheading - increase size, background color and font color*/
$(".brandlist-subhead").css({"background-color":"#0c0188"});
$(".brandlist-subhead").css({"font-size":"18px"});
$(".brandlist-subhead").css({"color":"white"});

/*pad the letter subheadings*/
$(".pcolor1").css({"padding":"3px"});

$(".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=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo2-Converse-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/dr-martens-shoes/category_6481\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo3-DrMartens-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/under-armour/category_951969\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo4-UA-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/timberland-shoes/category_11\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo5-Timberland-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/the-north-face/category_4748\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo6-TNF-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/toms/category_1253291\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo7-TOMS-112116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/birkenstock-shoes/category_142\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo8-Birkenstock-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/new-balance-shoes/category_88\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo9-NB-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/vionic-with-orthaheel-technology/category_4421\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo10-Vionic-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/lucky-brand-shoes/category_4249\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo11-Lucky-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/clarks-shoes/category_105\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo12-Clarks-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/skechers-shoes/category_133\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo13-Skechers-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/dansko/category_4784\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo14-Dansko-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/adidas/category_109\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo15-adidas-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/rockport-shoes/category_24\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo16-Rockport-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/ugg/category_1074\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo17-UGG-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/sorel-shoes/category_5374\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo18-Sorel-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/cole-haan/category_563880\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo19-ColeHaan-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/keen-shoes/category_14\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo20-Keen-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li><li><a href=\"/merrell-shoes/category_25\"><img src=\"//cdn-us-cf.yottaa.net/55f372142bb0ac1dfe001c14/www.shoebuy.com/v~13.ab/images/siteimgs/shoebuy/v4/Logo21-Merrell-090116.jpg?yocs=1j_22_&yoloc=us\"></a></li></ul></div></div></div></div><div class=\"grd-row grd-spacer-1\"></div>");
KO
Level 2

ToddSeller 01-20-17
 

Re: Injected html is being cut off

KO,

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

Platform Certified
Optimizely
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

KO
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
Optimizely