Ad

Dynamically Expanding Width Of A Dynamically Loaded DIV

- 1 answer

I've created a tooltip that is loaded dynamically based on server side data. It's been working well until I got to much larger SKUs. Now there is overflow.

I'm trying to use either CSS or JS to dynamically change the width to eliminate the overflow as 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 the correct way to do this?

Ad

Answer

Removing no-repeat from the background rule allows the width to adjust to different lengths of text.

Revised Fiddle

Ad
source: stackoverflow.com
Ad