javascript - Dynamically expanding width of a dynamically loaded DIV -
i've created tooltip loaded dynamically based on server side data. it's been working until got larger skus. there overflow.
i'm trying use either css or js dynamically change width eliminate overflow shown in this fiddle.
my html:
<div class="ext-tooltip 12345-789-1456789-431535" data-sku="12345-789-1456789-431535"> <div class="tooltip-stock">12345-789-1456789-431535 :: 5</div> </div> <div id="invoice-lines"> <div id="progress-container" class="hide" style="display: none;"> <div class="progress-bar-container"> <div id="progress-bar" class="progress-bar-progress" style="width: 100%;"></div> </div> <div class="example ta_center">loading...</div> </div> <table cellspacing="0" id="invoice-time" class="invoice-lines spreadsheet" style="display:none"></table> my css:
.ext-tooltip { display: inline-block; background: url(//cdn.shopify.com/s/files/1/0059/3992/t/14/assets/oem-icon.png?17543244824127338148) -78px 0 no-repeat; font-family: arial, sans-serif; padding: 0 10px 7px 3px; margin-left: 3px; line-height: 22px; overflow: hidden; color: black; font-weight: normal; font-size: 9pt; } my js:
var $tooltip = $('.ext-tooltip.12345-789-1456789-431535'); $tooltip.innerwidth($('.tooltip-stock', $tooltip).innerwidth()); what's correct way this?
removing no-repeat background rule allows width adjust different lengths of text.
Comments
Post a Comment