I have a set up that looks something like:
<mx:Canvas>
<mx:Image id="mayimage"/>
</mx:Canvas>
<mx:Button id="watermark"/>
Where the button is the watermark that I want to keep on top of the image.
But after loading the actual image dynamically using addChild into "myimage", the skin of the button(which is embeded using #Embed) is covered up by the new image.
The weird thing is, it looks fine in Firefox, where the watermark button is still on the very top layer, it only gets covered up in Chrome. Also, the button is still clickable even though it's covered by the image, meaning only the skin of the button is covered...
Anyway of keeping the skin of the button on the very top layer?
If we consider this:
<mx:Canvas id="myCanvas">
<mx:Image id="mayimage"/>
</mx:Canvas>
<mx:Button id="watermark"/>
and you use myCanvas.addChild(myImage) the image will never overlap the watermark. Are you by any chance adding it to the upper level canvas?
Don't use addChild to display your image, just change the source property of myimage.
Related
I have a more complicated problem. Let me describe what I want to achieve and where I want to get to.
Current situation:
I have an image component <Image src="/images/background/background1.png" alt="image" /> that serves as the first background. If the user scrolls to the bottom of the page, the background is replaced and a second <Image src="/images/background/background2.png" alt="image" /> is thrown in. If the user scrolls down to the second background, the
<Image2 ref={imageRef} onWheel={handlWheel} src="/images/background/background3T.png" alt="image" style={{opacity,display: opacity < 0.2 ? "block" : "block",transform:scale(${scale}),}} />
, where by gradually scrolling, I change the style of this image until it is fully visible and has the scale set to 1 . Then I should see the <CustomDiv /> div below this image. The problem is that it also shows up in the HTMLDOM, but you can't scroll into it... also when u scroll back, the bugs are appearing.
Technology: Typescript, React
GitHubRepo for whole code: Code
Target:
So I want to achieve that I will scroll through the first background to the bottom, then a second background will appear, where when I scroll down on the second background, an image is displayed that takes up the whole screen and its attributes start to change gradually based on scrolling (onwheel), at that moment when the attributes are set. It will display a new div under this image and allow the user to scroll further to it. (This whole process must also be reversed)
Can I ask for some advice on where exactly I'm going wrong? Alternatively, ask for some resources where a similar problem is solved. Maybe some library can be used for this, where afterwards this styling will not be such a problem.
I've created an image map, and then put a youtube video with a
<div style="position:relative;top:-400;">
because I want it to display over the image. Then I have another Image I want to display below that, but it displays below where the video would have been, and if I use top:-400 to move the image up, it works, but some invisible field is blocking me from clicking parts of the image map.
The solution was to use 'margin-top' instead of 'position:relative;top:-400px;'
This does keep the space of the original position.
I am trying to align my text over a VBox correctly. The VBox I am using has a background image. Then the label overlaps the image. This is basically creating an button I want.
The issue is that the background image I am using has a shadow effect on the bottom. So when I use verticalAlign="middle" on the VBox it isn't actually centered.
I have tried changing the VBox and the Labels y value, top & bottom properties, and verticalCenter property. None of them seem to shift the label up or down in anyway. I am confused on why these would not shift the label.
Here is my current code w/o any y, top, bottom or verticalCenter set.
<mx:VBox height="70" width="175" backgroundImage="{buttonBackground}" verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" buttonMode="true" useHandCursor="true" mouseChildren="false" click="{controller.goToPage('configPg')}">
<mx:Label text="Configure" buttonMode="true" useHandCursor="true" mouseChildren="false" fontSize="24" color="white"/>
</mx:VBox>
Any help would be greatly appreciated.
Thanks
I was able to solve this by adjusting the paddingBottom. Thanks drkstr1 for the answer.
All the properties you tried are irrelevant in a layout container. Use the font styles to position your text (EG. padding, verticalAlign, textAlign, etc.), Or use a Canvas with manual positioning if there is nothing else in the VBox. – drkstr1 Nov 14 at 17:25
Working with Flex 4.6 spark forms, i encountered strange behaviour:
FormItem element ALWAYS has inner gap (padding), which cannot be removed.
Red area on image ilustrates the unwanted GAP that i cannot manage to get rid of.
Blue border represents Form component. Grey border (thin) represents FormItem component.
FormItem has no padding or gap property.
This is the code for image above:
<s:Form id="form">
<s:layout>
<s:FormLayout gap="0"
paddingBottom="50"
paddingTop="0"/>
</s:layout>
<s:FormItem width="100%" label="RC">
<s:TextInput id="myTextInput" width="215"/>
</s:FormItem>
</s:Form>
When developing for mobile, you want to make best use of every pixel on your screen. This is unacceptable for me since i want to have several TextInput fields and having this gap will waste lots of space...
So my question is, can the red GAP be removed? I want my FormItem to have padding 0 - meaning TextInput border will touch FormItem border...
Well things like that are usually managed by the skin of the component, so what you have to do is to provide your own skin for your FormItem components. The easiest way to do it is to copy the skin provided by Adobe and make some tweaks that'll accomplish what you require. Most of all you have to set baseline to maxAscent:0 on row1 ConstraintRow and bottom to row1:0 on sequenceLabelDisplay, labelDisplay and contentGroup components.
I have a layout question for Tab Navigators in Adobe Flex 3.
Is it possible to insert a button that invades the grid space of the tabs?
I have a tab navigator component and I am dynamically adding sub components to tab navigator and I want squeeze a button inside the tab space. I don't want the button to be another tab. And I don't want to use a TabBar for the tabs.
This graphic illustrates the problem.
This is the current layout I have
This is a mockup (photoshopped) of the layout I want. I basically want to shave some pixels off the layout.
Is there a way to push the button down or manually override its layout position in MXXML or actionscript?
I would think if you put the elements in a Canvas (which allows you to lay out elements absolutely) rather than a VBox as it appears you are using now, you could force the Home button to display the way you want it to, ie:
<mx:Canvas>
<mx:Button top="5" right="5" />
<mx:TabNavigator top="5" left="5" right="5" />
</mx:Canvas>