You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by mo...@comcast.net on 2016/06/16 01:41:54 UTC
how to pad text in mx:MenuBar?
I'm using mx:MenuBar with Flex 4.12 SDK, and having trouble figuring out how to shift the menu text down a few pixels.
Ideally this would be a paddingTop adjustment so only the text shifts.
The text in question is what appears just looking the menu bar, without clicking, hovering, etc. over it with a mouse. It's the text that after you click it, it opens up a menu below it (note: the text I want to shift is the one you click on, not the text that appears after you click it).
I don't want to change the margin of the menu bar.
So far, I've tried
<fx:Style>
.menuStyle{
paddingTop:3;
}
</fx:Style>
but this deals with the items that appear after you click the menu bar. How to adjust the text of the menu bar itself?
I also tried CSS changes but didn't find anything that effected MenuBar.
mx|MenuBar {
paddingTop:3;
}
mx|List {
paddingTop:3;
}
Any hints very much appreciated. Thanks in advance.
Re: how to pad text in mx:MenuBar?
Posted by Alex Harui <ah...@adobe.com>.
There appears to be a sparkSkin, but it seems to be used as the
background. The Label is not part of the skin and is always centered
according to how tall it is.
I think you'll have to monkey patch or subclass.
-Alex
On 6/16/16, 6:45 AM, "modjklist@comcast.net" <mo...@comcast.net> wrote:
>Hi Alex, that's interesting.
>
>The problem I see is when the menubar "centers" the text, whether or not
>it actually APPEARS centered in the menubar depends on the font's ascent
>and/or descent values (see image here):
>
>https://en.wikipedia.org/wiki/Ascender_(typography)
>
>Fonts that support a large set of unicodes for Greek, Cryllic, etc. can
>have enormous values for the ascent or descent to fit all the characters
>in, which can really throw what you'd expect to be the center of the text
>way off. Thus, I need to manually center the text to get it to look
>"centered".
>
>Being mx, there's no way to skin it, right? Here are some related links
>that you might see more than I do on possible approaches:
>
>http://stackoverflow.com/questions/4624050/set-mxmenubar-left-and-right-pa
>dding-to-zero
>
>https://forums.adobe.com/thread/660778
>
>http://www.cflex.net/showfiledetails.cfm?FileID=272
>
>http://www.jusfortechies.com/flex/positioning-icon-on-menubar-item.php
>
>Or, if anyone has an off-the-wall suggestion to jerry-rig it, I'd be
>interested.
>
>I thought about adding a slim rectangle above or below the menubar with
>the same color as the menubar's background to give a visual appearance of
>centered text. This would be fine until you mouse over it - then the
>menubar's hover fill color will show that it's really off-centered, so
>that won't work. Any other ideas?
>
>thanks so much for any advice.
>
>----- Original Message -----
>
>From: "Alex Harui" <ah...@adobe.com>
>To: users@flex.apache.org
>Sent: Wednesday, June 15, 2016 9:43:06 PM
>Subject: Re: how to pad text in mx:MenuBar?
>
>I just spent a few minutes looking through the source and I don't see a
>way to control it. In MenuBarItem it appears to always center the
>UITextField that is the label. You could try subclassing MenuBar,
>override updateDisplayList, call super.updateDisplayList, then loop
>through the children and change their y values.
>
>HTH,
>-Alex
>
>On 6/15/16, 6:41 PM, "modjklist@comcast.net" <mo...@comcast.net>
>wrote:
>
>>I'm using mx:MenuBar with Flex 4.12 SDK, and having trouble figuring out
>>how to shift the menu text down a few pixels.
>>
>>Ideally this would be a paddingTop adjustment so only the text shifts.
>>
>>The text in question is what appears just looking the menu bar, without
>>clicking, hovering, etc. over it with a mouse. It's the text that after
>>you click it, it opens up a menu below it (note: the text I want to
>>shift
>>is the one you click on, not the text that appears after you click it).
>>
>>I don't want to change the margin of the menu bar.
>>
>>So far, I've tried
>>
>>
>>
>><fx:Style>
>>.menuStyle{
>>paddingTop:3;
>>}
>></fx:Style>
>>
>>
>>
>>
>>but this deals with the items that appear after you click the menu bar.
>>How to adjust the text of the menu bar itself?
>>
>>
>>
>>
>>I also tried CSS changes but didn't find anything that effected MenuBar.
>>
>>
>>
>>
>>mx|MenuBar {
>>
>>paddingTop:3;
>>
>>}
>>
>>
>>
>>
>>mx|List {
>>
>>paddingTop:3;
>>
>>}
>>
>>
>>
>>
>>Any hints very much appreciated. Thanks in advance.
>
>
Re: how to pad text in mx:MenuBar?
Posted by mo...@comcast.net.
Hi Alex, that's interesting.
The problem I see is when the menubar "centers" the text, whether or not it actually APPEARS centered in the menubar depends on the font's ascent and/or descent values (see image here):
https://en.wikipedia.org/wiki/Ascender_(typography)
Fonts that support a large set of unicodes for Greek, Cryllic, etc. can have enormous values for the ascent or descent to fit all the characters in, which can really throw what you'd expect to be the center of the text way off. Thus, I need to manually center the text to get it to look "centered".
Being mx, there's no way to skin it, right? Here are some related links that you might see more than I do on possible approaches:
http://stackoverflow.com/questions/4624050/set-mxmenubar-left-and-right-padding-to-zero
https://forums.adobe.com/thread/660778
http://www.cflex.net/showfiledetails.cfm?FileID=272
http://www.jusfortechies.com/flex/positioning-icon-on-menubar-item.php
Or, if anyone has an off-the-wall suggestion to jerry-rig it, I'd be interested.
I thought about adding a slim rectangle above or below the menubar with the same color as the menubar's background to give a visual appearance of centered text. This would be fine until you mouse over it - then the menubar's hover fill color will show that it's really off-centered, so that won't work. Any other ideas?
thanks so much for any advice.
----- Original Message -----
From: "Alex Harui" <ah...@adobe.com>
To: users@flex.apache.org
Sent: Wednesday, June 15, 2016 9:43:06 PM
Subject: Re: how to pad text in mx:MenuBar?
I just spent a few minutes looking through the source and I don't see a
way to control it. In MenuBarItem it appears to always center the
UITextField that is the label. You could try subclassing MenuBar,
override updateDisplayList, call super.updateDisplayList, then loop
through the children and change their y values.
HTH,
-Alex
On 6/15/16, 6:41 PM, "modjklist@comcast.net" <mo...@comcast.net> wrote:
>I'm using mx:MenuBar with Flex 4.12 SDK, and having trouble figuring out
>how to shift the menu text down a few pixels.
>
>Ideally this would be a paddingTop adjustment so only the text shifts.
>
>The text in question is what appears just looking the menu bar, without
>clicking, hovering, etc. over it with a mouse. It's the text that after
>you click it, it opens up a menu below it (note: the text I want to shift
>is the one you click on, not the text that appears after you click it).
>
>I don't want to change the margin of the menu bar.
>
>So far, I've tried
>
>
>
><fx:Style>
>.menuStyle{
>paddingTop:3;
>}
></fx:Style>
>
>
>
>
>but this deals with the items that appear after you click the menu bar.
>How to adjust the text of the menu bar itself?
>
>
>
>
>I also tried CSS changes but didn't find anything that effected MenuBar.
>
>
>
>
>mx|MenuBar {
>
>paddingTop:3;
>
>}
>
>
>
>
>mx|List {
>
>paddingTop:3;
>
>}
>
>
>
>
>Any hints very much appreciated. Thanks in advance.
Re: how to pad text in mx:MenuBar?
Posted by Alex Harui <ah...@adobe.com>.
I just spent a few minutes looking through the source and I don't see a
way to control it. In MenuBarItem it appears to always center the
UITextField that is the label. You could try subclassing MenuBar,
override updateDisplayList, call super.updateDisplayList, then loop
through the children and change their y values.
HTH,
-Alex
On 6/15/16, 6:41 PM, "modjklist@comcast.net" <mo...@comcast.net> wrote:
>I'm using mx:MenuBar with Flex 4.12 SDK, and having trouble figuring out
>how to shift the menu text down a few pixels.
>
>Ideally this would be a paddingTop adjustment so only the text shifts.
>
>The text in question is what appears just looking the menu bar, without
>clicking, hovering, etc. over it with a mouse. It's the text that after
>you click it, it opens up a menu below it (note: the text I want to shift
>is the one you click on, not the text that appears after you click it).
>
>I don't want to change the margin of the menu bar.
>
>So far, I've tried
>
>
>
><fx:Style>
>.menuStyle{
>paddingTop:3;
>}
></fx:Style>
>
>
>
>
>but this deals with the items that appear after you click the menu bar.
>How to adjust the text of the menu bar itself?
>
>
>
>
>I also tried CSS changes but didn't find anything that effected MenuBar.
>
>
>
>
>mx|MenuBar {
>
>paddingTop:3;
>
>}
>
>
>
>
>mx|List {
>
>paddingTop:3;
>
>}
>
>
>
>
>Any hints very much appreciated. Thanks in advance.