cfslider not formatting correctly

I'm trying to use multiple cfslider tags on a webpage, but for some reason, the sliders always group together at the top. Does anyone know how to make the sliders follow the html formatting?

What I want:

Title
slider

Title
slider

Title
slider

What I get:

Title
slider
slider
slider

Title

Title
<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress" 
format="HTML" 
vertical="false" 
width="150" 
value="50" 
min="0" 
max="100" 
tip="true"/>
</cfform>

<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress" 
format="HTML" 
vertical="false" 
width="150" 
value="50" 
min="0" 
max="100" 
tip="true"/>
</cfform>

<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress" 
format="HTML" 
vertical="false" 
width="150" 
value="50" 
min="0" 
max="100" 
tip="true"/>
</cfform>

Open in new window

Screen-shot-2010-03-29-at-2.40.2.png
cmckoyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_agx_Commented:
I strongly suspect this a bug.  Notice if you give the cfslider's different names, like progress1, progress2, etc... it works as you expect? Unfortunately ... this tag doesn't allow an "ID", which limits the options. Nothing else I've tried so far works. Maybe someone else has a workaround.  Either way, consider reporting it as a bug.


<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress1" 
	format="HTML" 
	vertical="false" 
	width="150" 
	value="50" 
	min="0" 
	max="100"
	tip="true"/>
</cfform>

<p>Slider Goes Here.</p>
<cfform>
	<cfslider name="progress2" 
	format="HTML" 
	vertical="false" 
	width="150" 
	value="50" 
	min="0" 
	max="100" 
	tip="true"/>
</cfform>

Open in new window

0
azadisaryevCommented:
yes, the only way to display sliders separately (instead of grouped together) is to give them unique NAMEs.

whether this is a bug or not - i am not sure: as with most cf controls you really should give them unique NAMEs (unless it is a radio/checkbox group, + in a few other cases).

when all your sliders have the same name, cf generates a container div element for each, but all with same ID (= '_cfslider_' + the NAME of your slider).
the javascript behind the slider control renders the slider interface to a container with that specific ID - and when you have several containers with the same ID, only the first one will be used to render all sliders in since reference to the first container is returned by document.getElementById('progress'). plus your page will have invalid html/xhtml as element IDs should be unique per page...

i think that requesting the slider to support ID attribute may be a valid enhancement request.

Azadi
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
_agx_Commented:
I think it's a bug. You can at least give most other elements a unique ID, which is what counts when it comes down to the CSS.  Not that my opinion matters here ... :P
0
_agx_Commented:
... and you're welcome cmckoy ;-)
0
cmckoyAuthor Commented:
Thanks so much! Solved my issue.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.