Position Spotfire Controls freely




html
<style>
#aCalcVal{position:absolute;top:30px; left:122px;}
#aBulletGraph{position:absolute;top:608px; left:204.6875px;}
#aDropDown{position:absolute;top:141px; left:91.6875px;}
#anInput{position:absolute;top:563px; left:222.6875px;}
</style>

<IMG src="5487af1ed6ec4b8c90da59da34200d0f.png" border=0>

<span  id='aCalcVal'>
<SpotfireControl id="0ec42a6609d541308d42c406369df8d5" />
</span>

<span id='aBulletGraph'>
<SpotfireControl id="e57d92f8099c438b9a2a003b413fef37" />
</span>

<span id='anInput'>
<SpotfireControl id="0b36814498214275a80596860f6abcd7" />
</span>

<span id='aDropDown'>
<SpotfireControl id="9c8c9f42216a4efc8bb63ce81113d9d4" />
</span>


Optionally add this javascript tool to stop guessing top and left positions.

js
$(".drag").draggable({
 cursor:"move",
 drag:function(e){
p =  $(this).position() 
id = $(this).attr('id')
css = "#"+id+"{position:absolute;top:"+p.top+"px; left:"+p.left+"px;}"
$("#pos").text(css)  
 }
 ,refreshPositions :true,

}).css({border:"1px dashed blue",padding:"5px"})

This tool requires to add class='drag' to all elements you wish to move, for example:
<span class='drag' id='aDropDown'>
<SpotfireControl id="9c8c9f42216a4efc8bb63ce81113d9d4" />
</span>

It also requires a way to display the position:
<div id="pos">--</div>




No comments: