Set textfield width using wordwrap: false /autosize:left

Tourvista · December 12, 2009 at 2:00 PM

Hi all!

Please take a look at my example:

http://clients.tourvista.co.uk/vt/sir_jonathan_north/index.html

According to the documentation, if I set 'wordwrap: false' and 'autosize:left' it should make the right side expands until it fits the entire text.
As you can see it is not working. Am I missing something?

My code is underneath.
hotspot_bg is the school logo on the left side.
hotspot is the problematic one.

Thanks!!!!

PS: tried 'autosize:right' and 'autosize:center' but doing that, the text flies from right to left when the tiles are loading and I never see it again
Actually it is very funny so I am going to leave 'autosize:right' so you can see it, and post a screen shot using 'autosize:left'

Code

<action name="set_hotspots">
		action(config_hotspots, hs_1, reception_area, Resistant materials, 335.8, 15.0, 331.7, 0.5);	
</action>	




<action name="config_hotspots">


addhotspot(%1_hotspot_bg);
    set(hotspot[%1_hotspot_bg].url,%HTMLPATH%/files/krpano/textfield.swf);
	set(hotspot[%1_hotspot_bg].edge,centerright);
	set(hotspot[%1_hotspot_bg].width,60);
	set(hotspot[%1_hotspot_bg].height,55);
	set(hotspot[%1_hotspot_bg].html,[img src="files/images/hs_logo.png" width="50" height="40"/]);
	set(hotspot[%1_hotspot_bg].background,false);
	set(hotspot[%1_hotspot_bg].ath,%4);
	set(hotspot[%1_hotspot_bg].atv,%5);
	set(hotspot[%1_hotspot_bg].zorder,5);
	set(hotspot[%1_hotspot_bg].alpha,0.8);
	set(hotspot[%1_hotspot_bg].onhover,showtext(Explore %3,hs_style););
    set(hotspot[%1_hotspot_bg].onclick,lookto(%6,%7,20,smooth(100,20,50)); 
									loadpano(%HTMLPATH%/files/panos/%2.xml,null,MERGE,BLEND(1));
									action(set_hotspots);
									);			
	
addhotspot(%1_hotspot);
    set(hotspot[%1_hotspot].url,%HTMLPATH%/files/krpano/textfield.swf);
	set(hotspot[%1_hotspot].edge,centerleft);
	set(hotspot[%1_hotspot].children,false);
	set(hotspot[%1_hotspot].width,80);
	set(hotspot[%1_hotspot].height,40);
    set(hotspot[%1_hotspot].html,[p]%3[/p]);
	set(hotspot[%1_hotspot].css,data:hotspot_css);
	set(hotspot[%1_hotspot].ath,%4);
	set(hotspot[%1_hotspot].atv,%5);
	set(hotspot[%1_hotspot].ox,10);
    set(hotspot[%1_hotspot].background,true);
	set(hotspot[%1_hotspot].backgroundcolor,0x002b50);
	set(hotspot[%1_hotspot].bordercolor,0xffffff);
	set(hotspot[%1_hotspot].roundedge,5);
	set(hotspot[%1_hotspot].borderwidth,1);
	set(hotspot[%1_hotspot].wordwrap,false);
	set(hotspot[%1_hotspot].autosize,right);
	set(hotspot[%1_hotspot].selectable,false);
	set(hotspot[%1_hotspot].handcursor,true);
	set(hotspot[%1_hotspot].alpha,0.8);
	set(hotspot[%1_hotspot].zorder,5);
	set(hotspot[%1_hotspot].keep,false);
    set(hotspot[%1_hotspot].onclick,lookto(%6,%7,20,smooth(100,20,50)); 
									loadpano(%HTMLPATH%/files/panos/%2.xml,null,MERGE,BLEND(1));
									action(set_hotspots);
									);	
	
</action>		


<textstyle name="hs_style"
			font="Arial"
			fontsize="12"
			bold="true"
			italic="true"
			background="true"
			backgroundcolor="0xd7e1e4"
			border="true"
			bordercolor="0x002b50" 
			textcolor="0x002b50"
			alpha="1"
			blendmode="mormal"
			effect="" 
			origin="cursor" 
			edge="bottom" 
			textalign="none" 
			xoffset="0" 
			yoffset="-3"
/>
	
<data name="hotspot_css">	
	p { color:#ffffff; 
	    font-family:Arial; 
		font-weight:bold; 
		font-size:12; 			  
		text-align:center;
		margin-left:0;
		margin-right:0;
		}	
</data>

Display More

Tourvista · December 12, 2009 at 4:22 PM

I've tried to make it simpler to isolate the problem:

Code

addplugin(%1_hotspot);
    set(plugin[%1_hotspot].url,%HTMLPATH%/files/krpano/textfield.swf);
	set(plugin[%1_hotspot].width,150);
	set(plugin[%1_hotspot].height,20);
    set(plugin[%1_hotspot].html,Resistant materials);
	set(plugin[%1_hotspot].align,center);
    set(plugin[%1_hotspot].background,true);
	set(plugin[%1_hotspot].wordwrap,false);
	set(plugin[%1_hotspot].autosize,center);

Notice I have changed it from hotspot to plugin.

This is the result:

Background and text are split in two.

set(plugin[%1_hotspot].autosize,right); places the text even further to the right.
set(plugin[%1_hotspot].autosize,left); places the text inside the box, on the right side. But it doesn't resize the box width to adjust to the text.

Just to clarify, what I would like to have is a box that adjust its width, so it doesn't matter the length of the text. Both, box and text will always fit each other. I thought that was the autosize functionality.

michel · December 12, 2009 at 6:04 PM

Hi Tourvista,

Quote

it doesn't resize the box width to adjust to the text

Looking at the textfield doc it seems that autosize does not apply to the width... only to the height.

Quote from Textfield plugin doc

autosize
fit height of textfield automatic to the content
allowed values: "none", "left", "center", "right", default="none"

Also, look at this thread from Graydon: textfield - autosize attribute explanation

The textfield plugin is a little bit difficult to understand ... At least for me ...

SAlut.

Tourvista · December 14, 2009 at 1:39 PM

Thanks for the reply Mishel,

That thread is the only one talking about the wordwrap property. Every time I read it I understand a different thing
Anyway I gave up. Now I am using a combination of two textfield plugins, one hosting the graphic and the other one hosting the text. And then replace them using ox and oy.

Cheers

sachagriffin · October 24, 2011 at 7:27 PM

left,right, center is the text alignment when using wordwrap. One interesting feature is that if you have wordwrap false and autosize center or right. The text in the textfield gets really offended if you resize the window and starts making a run for it, even escaping all textfield attributes.

Quote from michel

Hi Tourvista,
Looking at the textfield doc it seems that autosize does not apply to the width... only to the height.
Also, look at this thread from Graydon: textfield - autosize attribute explanation
The textfield plugin is a little bit difficult to understand ... At least for me ...
SAlut.

Set textfield width using wordwrap: false /autosize:left

Participate now!

Users Viewing This Thread