Question

I have a jScrollPane on a magento product page which is fetching in options which are displayed as an inline list (see screenshot – http://awesomescreenshot.com/06dlbao6b ).

Is it possible to dynamically set a division size depending on the content as some products will only have 2 options but some may have 27.

So far I’ve only worked out a way of showing more than 4 options if I manually set the division width, this isn’t really an option as if I only have 3 products I don’t need to show the scroll controls.

The division in question is the product-options-chooser div.

Not sure if it helps but here is the code in question from \template\catalog\product\view\options\type\select.phtml :

<?php /* @var $this Mage_Catalog_Block_Product_View_Options_Type_Select */ ?>
<?php $_option = $this->getOption() ?>

<script>
jQuery(function()
{
    var pane = jQuery('.product-options-container');
    pane.jScrollPane(
        {
            showArrows: true,
            animateScroll: true
        }
    );
});
</script>
  <div class="product-options-title">
    <dt>
      <label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>>
        <?php if ($_option->getIsRequire()) echo '<em>*</em>' ?>
        <?php echo  $this->htmlEscape($_option->getTitle()) ?></label>
    </dt>
  </div>
<div class="product-options-container">
  <div class="product-options-chooser">
    <dd<?php if ($_option->decoratedIsLast){?> class="options-last"<?php }?>>
      <div class="input-box"> <?php echo $this->getValuesHtml() ?>
        <?php if ($_option->getIsRequire()): ?>
        <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
        <span id="options-<?php echo $_option->getId() ?>-container"></span>
        <?php endif; ?>
        <?php endif;?>
      </div>
    </dd>
  </div>
</div>

Answer 1

Have a workaround for this now as managed to set widths to specific classes for specific products