Ya... I thought of that...
my dropdown is wider than the combobox
When I move the dropdown over to the left it gets cutoff at the left
edge of the combobox
I've attached two jpg's that display the effects I describe.
I even tried climbing backup the heirachy setting the clipContent =
false to no avail
here's the code I used to shove the dropdown over
var listnr = new Object();
listnr.open = function(event)
{
//event.target is the combobox
var dropdown = event.target.dropdown;
dropdown.clipContent = false;
event.target.clipContent = false;
event.target._parent.clipContent = false;
event.target._parent._parent.clipContent = false;
event.target._parent._parent._parent.clipContent = false;
if (event.target.dropdownWidth - event.target.width > 0)
{
//align it to the right
dropdown.x = dropdown.x - (dropdown.width -
event.target.width);
}
};
cntrl.addEventListener("open",listnr);
_____
From: Deepa Subramaniam [mailto:[EMAIL PROTECTED]
Sent: Wednesday, June 02, 2004 12:25 PM
To: '[email protected]'
Subject: RE: [flexcoders] Any way to align the dropdown in a combobox to
the opposite edge?
Hi -
I looked into this, and I think the easiest thing to do would be to
catch
the combobox's open() event and manually move the dropdown over by
changing
the dropdown's x,y positions. Something like the following code below.
Note,
you might have to throw a doLater() call in there to delay the animation
a
bit.
<mx:ComboBox id="myComboBox" dropdownWidth="180" open="modifyCB();">
<mx:dataProvider>
<mx:Array>
<mx:String>foo</mx:String>
<mx:String>foo</mx:String>
<mx:String>foo</mx:String>
<mx:String>foo</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:Script>
function modifyCB(){
myComboBox.dropdown.setStyle('textAlign', 'right');
myComboBox.dropdown.x-= 25;
}
</mx:Script>
Of course, the easiest thing to do would be to make your ComboBox the
same
width as the dropdown and simply textAlign the items to the right. This
would make the component look more balanced too. But both ways work as
you
would want.
Thanks,
Deepa
Flex Team
-----Original Message-----
From: johny_bravo_78 [mailto:[EMAIL PROTECTED]
Sent: Wednesday, June 02, 2004 9:11 AM
To: [email protected]
Subject: [flexcoders] Any way to align the dropdown in a combobox to the
opposite edge?
because that would be useful if your combobox is at the right edge of
the page and you want it to be wider than the combobox.
Yahoo! Groups Links
Yahoo! Groups Sponsor
ADVERTISEMENT
click here
<http://rd.yahoo.com/SIG=129hkf8pn/M=298184.5022502.6152625.3001176/D=gr
oups/S=1705007207:HM/EXP=1086287130/A=2164339/R=0/SIG=11e2d64in/*http:/w
ww.netflix.com/Default?mqso=60183348>
<http://us.adserver.yahoo.com/l?M=298184.5022502.6152625.3001176/D=group
s/S=:HM/A=2164339/rand=680494176>
_____
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>
* Your use of Yahoo! Groups is subject to the Yahoo! Terms of
Service <http://docs.yahoo.com/info/terms/> .
------_=_NextPart_002_01C448DD.C87DAB1A
Content-Type: text/html;
charset="us-ascii"
Content-Transfer-Encoding: quoted-printable
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40";>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
tt
{font-family:"Courier New";}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:1439332935;
mso-list-template-ids:2035071858;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Ya… I thought of
that…<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>my dropdown is wider than the
combobox<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>When I move the dropdown over to the left
it gets cutoff at the left edge of the combobox<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>I’ve attached two jpg’s that
display the effects I describe.<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>I even tried climbing backup the heirachy
setting the clipContent = false to no avail<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>here’s the code I used to shove the
dropdown over<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>var listnr = new
Object();<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>listnr.open =
function(event)<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>{<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>
//event.target is the combobox<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>var dropdown =
event.target.dropdown;<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>dropdown.clipContent =
false;<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>event.target.clipContent
= false;<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>event.target._parent.clipContent
= false;<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>event.target._parent._parent.clipContent
= false;<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>event.target._parent._parent._parent.clipContent
= false;<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>if
(event.target.dropdownWidth - event.target.width >
0)<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>{<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>
//align it to the right<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>
dropdown.x = dropdown.x - (dropdown.width -
event.target.width);<o:p></o:p></span></font></p>
<p class=MsoNormal style='margin-left:.5in'><font size=2
color=navyface=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'>}<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>};<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>cntrl.addEventListener("open",listnr);<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font></p>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> Deepa
Subramaniam [mailto:[EMAIL PROTECTED] <br>
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, June 02, 2004
12:25 PM<br>
<b><span style='font-weight:bold'>To:</span></b>
'[email protected]'<br>
<b><span style='font-weight:bold'>Subject:</span></b> RE: [flexcoders] Any way
to align the dropdown in a combobox to the opposite
edge?</span></font><o:p></o:p></p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
<p class=MsoNormal><tt><font size=2 face="Courier New"><span style='font-size:
10.0pt'>Hi -</span></font></tt><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><br>
<br>
<tt><font face="Courier New">I looked into this, and I think the easiest thing
to do would be to catch</font></tt><br>
<tt><font face="Courier New">the combobox's open() event and manually move the
dropdown over by changing</font></tt><br>
<tt><font face="Courier New">the dropdown's x,y positions. Something likethe
following code below. Note,</font></tt><br>
<tt><font face="Courier New">you might have to throw a doLater() call in there
to delay the animation a</font></tt><br>
<tt><font face="Courier New">bit. </font></tt><br>
<br>
<br>
<tt><font face="Courier New"><mx:ComboBox id="myComboBox"
dropdownWidth="180" open="modifyCB();"></font></tt><br>
<tt><font face="Courier New">
<mx:dataProvider></font></tt><br>
<tt><font face="Courier New">
<mx:Array></font></tt><br>
<tt><font face="Courier New">
<mx:String>foo</mx:String></font></tt><br>
<tt><font face="Courier New">
<mx:String>foo</mx:String></font></tt><br>
<tt><font face="Courier New">
<mx:String>foo</mx:String></font></tt><br>
<tt><font face="Courier New">
<mx:String>foo</mx:String></font></tt><br>
<tt><font face="Courier New">
</mx:Array></font></tt><br>
<tt><font face="Courier New">
</mx:dataProvider></font></tt><br>
<tt><font face="Courier New"></mx:ComboBox></font></tt><br>
<br>
<tt><font face="Courier New"><mx:Script></font></tt><br>
<br>
<tt><font face="Courier New">function modifyCB(){</font></tt><br>
<tt><font face="Courier New">
myComboBox.dropdown.setStyle('textAlign',
'right');</font></tt><br>
<tt><font face="Courier New">
myComboBox.dropdown.x-= 25;</font></tt><br>
<tt><font face="Courier New">}</font></tt><br>
<br>
<tt><font face="Courier New"></mx:Script></font></tt><br>
<br>
<tt><font face="Courier New">Of course, the easiest thing to do would be to
make your ComboBox the same</font></tt><br>
<tt><font face="Courier New">width as the dropdown and simply textAlign the
items to the right. This</font></tt><br>
<tt><font face="Courier New">would make the component look more balanced too.
But both ways work as you</font></tt><br>
<tt><font face="Courier New">would want. </font></tt><br>
<br>
<tt><font face="Courier New">Thanks, </font></tt><br>
<tt><font face="Courier New">Deepa </font></tt><br>
<tt><font face="Courier New">Flex Team</font></tt><br>
<br>
<br>
<tt><font face="Courier New">-----Original Message-----</font></tt><br>
<tt><font face="Courier New">From: johny_bravo_78
[mailto:[EMAIL PROTECTED] </font></tt><br>
<tt><font face="Courier New">Sent: Wednesday, June 02, 2004 9:11
AM</font></tt><br>
<tt><font face="Courier New">To: [email protected]</font></tt><br>
<tt><font face="Courier New">Subject: [flexcoders] Any way to align the
dropdown in a combobox to the</font></tt><br>
<tt><font face="Courier New">opposite edge?</font></tt><br>
<br>
<tt><font face="Courier New">because that would be useful if your combobox is
at the right edge of </font></tt><br>
<tt><font face="Courier New">the page and you want it to be wider than the
combobox.</font></tt><br>
<br>
<br>
<br>
<br>
<br>
<tt><font face="Courier New">Yahoo! Groups Links</font></tt><br>
<br>
<br>
<br>
<br>
</span></font><br>
<br>
<o:p></o:p></p>
</body>
</html>
------_=_NextPart_002_01C448DD.C87DAB1A--<<attachment: image/jpeg>>
<<attachment: image/jpeg>>
