here is my CSS for textInput
s|TextInput{
skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
contentBackgroundColor:#FFFFFF;
focusAlpha:0;
showPromptWhenFocused:false;
}
and I use simple:
<s:TextInput id="id1" />
<s:TextInput id="id1" height="40" />
<s:TextInput id="id1" height="60 />
On iphone/ipad: the close icon appears top cropped:
Any idea how to fix that ? (or even how to remove that X icon) ?
The icon is a set height and, at least in Flex, doesn't adjust its size. The cropping is from the height of the textfield (read: not the TextInput component, but the actual field the text goes in). Because that field is not as tall as the icon, the icon gets cropped.
There are two solutions:
The obvious one is to increase the height on the TextInput field until that icon is no longer cropped. You could just take your screenshot and measure out the pixels being cropped, if you want.
You get that icon because TextInput uses StageText. StageText uses native text rendering as opposed to Flash text rendering. In ideal situations, StageText is perfect. However, the situation is rarely ideal. To get around this, you simply apply the mobile TextInput skin skinClass="spark.skins.mobile.TextInputSkin" to your TextInput component(s). As www.Flextras.com pointed out to me yesterday, this reverts the TextInput back to its behavior prior to Flex 4.6, which introduced StageText.
Either one of those solutions should work for you. You just need to choose which is best. I prefer Option #2 because, as I mentioned, there are other issues with StageText (such as getting displayAsPassword to function correctly) that switching to that skin fixes
I would try editing the skin, because that is where the icon crop is happening
Related
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as ScriptLab:
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
<PrimaryButton
style={{ margin: 'auto' }}
text="Open link in new window"
// tslint:disable-next-line: jsx-no-lambda
onClick={() => {
window.open(this.props.url);
}}
/>
</div>
);
Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.
Does anyone know how to amend the code to get the effect like Script Lab?
Edit 1:
I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js
Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?
On button width:
In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).
On font adjustments
For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.
The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window.
width:280px;
Second Option: If you use min-width, the button width will decrease to a point.
Third Option: If you use max-width, the button width will increase upto a point.
Fourth Option: You can also use '#media' queries to customize the width according to size of the screen.
You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?
I've been adding some components to a Flex 4 app (it was originally Flex 3 but has been ported). Some of these components make the app go blank when it loads. I'm not even able to see the loading progress bar. Just white.
For example, adding
<s:controlBarContent>
<s:Button label="Admin" />
</s:controlBarContent>
To the root tag causes this. I also was able to make it happen when I tried setting a custom components skin from my style sheet instead of from the skinClass property.
Has anyone else run across this behavior?
Setting the creationPolicy for the navigation container to auto or all fixed it...
I am displaying some HTML text in an Adobe AIR Application that I do not want the user to be able to cut and paste. How do I make the HTML control disallow highlighting of the HTML without disabling the ScrollBars. mouseChildren=false works but disables the scrollbars which is unacceptable. Right now I have:
<mx:HTML location="http://dexter/preview.html" width="100%" height="100%" id="PreviewArea" x="0" y="0" tabEnabled="false" tabChildren="false" focusEnabled="false" focusRect="null"/>
But it's not working properly either.
I have also tried overlaying a disabled transparent text control over the top of the HTML component, but the user is still able to tab to the HTML and use the keyboard controls to copy the text to the clipboard.
Any hints?
You probably have to extend the HTML Component. Make the scroll bars, if applicable, usable, but apply set mouseEnabled, mouseFocusEnabled, mouseChildren, and focusEnabled to false on the inner display.
Alternatively, you could wrap the HTML component in a canvas. Set the HTML Component to it's measured height and measured width. Set the HTML Component to be 'unusable' with the above properties, but make the canvas usable.
Doesn't the HTML component display renderered HTML; not HTML Text? If you're displaying HTML Text, then you can use the TextArea and set editable and selectable to false.
I want my custom button to look like the button sample below.
More specifically, I want the width of the button to be determined by the width of the largest word in the label (i.e. width of "Elongated" in my example). The label must wrap, not truncate.
And I want only one pixel between the top edge of the icon and my button's top edge.
I have tried lots of things but to no avail so far. I have reduced the horizontalGap and verticalGap to zero and padding to zero. But still nothing. Please help.
Here's what I have right now:
<mx:Button top="0" cornerRadius="2" paddingLeft="0" paddingRight="0" leading="0" letterSpacing="0" paddingTop="0" paddingBottom="0" verticalGap="0" horizontalGap="0" textAlign="center" labelPlacement="bottom" icon="{MyIcon}" height="60" width="75" label="Elongated Label" fontSize="10" />
That's not at all simple.
You will need to create your own button,
public class Mybutton extends Button {...}
override createChildren and set the word wrap of the IUITextField used for the label to true.
override measure and use your own line metrics to determine the width that the button should be. If you get the measure right, the button will lay itself out properly.
I don't have a dev environment in front of me at the moment, but something along these lines should work:
Set truncateToFit property of the Label to false (OR use a TextField with wordWrap set to true - I think this should keep the words together as much as possible).
I haven't had the need to use any of the above yet, and hopefully you haven't tried them yet because it would be an easy solution to a part of your problem. Without any code, I'm not sure why padding didn't work, but maybe it's something to do with the word truncation.
As an alternative, why not use a Button, embed or specify a source for your icon and decide where to place the text by specifying the object's labelPlacement property?
EDIT: Since there's no property in Button about wordWrap, as they would recommend in the Adobe Flex forums for such questions regarding sizing based on content where there is no automatic feature to do that, you have to find the longest word and adjust the width of the button (i.e.: in the creationComplete event). Experimenting to find the font to pixel ratio would be my best bet (or you can use a Monospace font where all the characters are given the same space thereby simplifying the estimation):
creationComplete="event.target.width=returnMyWidth();"
As for the padding, it may be related to the custom width that you had set or it may be from embedding the image automatically setting a padding by being included - I'm not really sure, so it would be good if someone can offer a comment based on experience with this.
I see that Flex3 has a class called ApplicationControlBar dedicated to "holding components that provide global navigation and application commands." (quoted from the langref). The question is: is there an advantage of using this class instead of just adding a plain HBox with a greyish background, or is it just a matter of taste?
In my current code, I use the following box:
<mx:HBox verticalAlign="middle" horizontalGap="5" backgroundColor="0xCCCCCC"
width="100%" paddingTop="5" paddingRight="5" paddingBottom="5"
paddingLeft="5">
Granted, this requires explicitly specifying a few attributes, but other than that?
ApplicationControlBar is essentially an HBox with both scroll policies set to false and a transparent background. The only other feature it offers is the ability to be docked. From the Livedocs:
Docked mode: The bar is always at the top of the application's drawing area and becomes part of the application chrome. Any application-level scroll bars don't apply to the component, so that it always remains at the top of the visible area, and the bar expands to fill the width of the application. To create a docked bar, set the value of the dock property to true.
If you look at the source for ApplicationControlBar and Application.dockControlBar you'll see that when docked=true the bar is added to rawChildren instead of children which is what allows it to "ignore" scollbars and such.
In addition to the previous answer I can add, that it's possible to set the gradient background to the ApplicationControlBar, which is not allowed to the HBox, if you're not using the special border type, of course :)
But even with HBox you can still draw your own gradient background without setting the border style.