Issues

ZF-5220: Dojo component would always display horizontal slider labels equal to 0%, 50%, 100%

Description

I was trying to prepare some forms using HorizontalSlider components. What I encountered was that whatever labels I put in the addElement function of the form, I would always get three labels: 0%, 50%, 100% displayed.

My code is simple: {quote} $form->addElement('HorizontalSlider', 'slide1', array( 'label' => '1. Jestem zadowolony z przebiegu negocjacji.', 'minimum' => 1, 'maximum' => 3, 'discreteValues' => 3, 'showButtons' => false, 'style' => 'width: 450px;', 'topDecorationDijit' => 'HorizontalRuleLabels', 'topDecorationLabels' => array(' ', '20', '30'), 'topDecorationParams' => array('style' => 'padding-top: 5px; height: 20px;'), )) {quote}

But actually the issue is not with the code itself, as I have tried numerous examples from reference guide and I always got the same result.

I've played a bit into the code rendered by ZF, and what I found was as follows.

1) Framework generates a {{

<

div>}} for a decorator container followed by {{ol}} list of labels. The problem is that the {{ol}} is included inside the {{div}}. See the HTML below: {quote}

*
*
  1. ...
  2. ...
  3. ...
*{color:red}
{color}* {quote} I've played a bit with the HTML and got a better results when I moved the {{

}} tag before the {{

<

ol>}} one, like that: {quote}

<

div id="horizontal-slider" onChange="..." ... dojoType="dijit.form.HorizontalSlider"> *

{color:red}

{color}*

  1. ...
  2. ...
  3. ...

{quote}

2) However, that didn't solve the whole issue. With manually modified HTML I finally got my very own labels above the slider. But at the same time, I got those 0,50,100% overlayed. So I kept on investigating the problem and found out that ZF assigns the {{dojoType=dijit.form.HorizontalRuleLabels}} property to both {{div}} and {{ol}} tags. Removing {{dojoType}} from {{div}} solved the case.

{quote}

<

div id="horizontal-slider" onChange="..." ... dojoType="dijit.form.HorizontalSlider"> *

{color:red}

{color}*

  1. ...
  2. ...
  3. ...

{quote}

I tried those with both programmatic and declarative ussage of Dojo. Described solutions works in both cases. I think that Dojo looks for the list of labels after the container {{div}}. At least this is what I found here:

http://dojotoolkit.org/book/dojo-book-0-9/…

In the second example on that page the only case when dojoType is set to {{div}} is when it is the HorizontalRule type. Then it includes both rule lines and labels 0,50,100%. In two other cases there is no dojoType in {{div}} tag.

Good luck with that bug. Regards, Rafal

Comments

Thank you for the detailed information! I've committed changes that should resolve the issue to both the trunk (r13657) and 1.7 release branch (r13658).