Context:
I have an app (TinyUX) where people can draw wireframes. It uses a Flatlist grid, where each cell can have a background color, and an icon or text.
The text can be larger than the cell (50x50).
Assuming left text-alignment I created it so the zIndex went down with each cell (data.length - i)
Now I'm trying to add right-alignment.
So for some cells the text needs to overlap the cells to the right, sometimes to the left. But the background of the cell of either left or right (depending how I set the zIndex in relation to i will have the background overdraw the text.
It would seem logical to just make all texts have an zIndex that is higher than the rest of the cell, so they are all above the rest of the cell (icon(s), background colors). But I can't get that to work.
De cell component is nested something like this:
TouchableOpacity (has background color)
Image (positioned absolute, top left to parent)
Image (positioned absolute, top left to parent)
Text (positions absolute, top let to parent.
They have position absolute, so they can overlap.
With my current solution I can make either right or left alignment work.
Main question: How can a child of the renderItem component of a Flatlist grid, have a higher zIndex than every other cell in the grid.
Confusingly.. I just had it working when Metro was not connected, then restarted with Metro and failed again. The component uses React.memo(.. so now I'm not sure if I once was in a state with the fix..
Related
Moving a view I try to hide all parts of view that cross some vertical line, so view starts to loose its width to 0.
The image describes better what I want.
I mean not just shrink a width with scaleX but hide, because this command compresses the photo horizontally, and I need to hide it without distortion.
How can I do it?
On the image a photo started to move left with translationX hiding line by line left side of the photo during this movement. Also, the photo is not at left edge of screen - it's on the center
View has left(and x) attribute in its LayoutParams.
How can I dynamically set the position of view in Android?
When left attribute is negative, it is hidden under the parent view.
If you want an animation, here is the document!
https://developer.android.com/develop/ui/views/animations/reposition-view
I have the following project: https://codesandbox.io/s/vue-template-c1rj1
I expect the image to just come up from the bottom of the screen already being in the middle of the page, but it first comes up from the bottom and then moves to the center of the page. I noticed that setting the width of the notification-box class to 100% fixes it but I am not exactly sure why.
The reason this is not working is because the fixed css property positions an element relative to the parent layer. Usually this is the viewport.
However, the transition property creates a new layer for the the Element it is used on. In your case, Vue applies the transition property during the animation - making the notification-box the next parent-layer (with a width of 0).
Positioning your Image 50% (of 0) left, does not do anything.
Once the animation is over, the transition property disappears, making the viewport once again the next parent layer. Now 50% left (of the viewport) gives you the desired result.
How Do I create that Button in React Native?
As above, button component include two part , left is text part, right part include another background color and image.
But, whole button component includes same border radius and gradient.
Does somebody might know how to get to this?
You should wrap two sibling View components with TouchableOpacity component which will handle onPress for the whole button. Position them side by side using flex and set explicit sizes on each. Left element should get borderTopLeftRadius and borderBottomLeftRadius and right should get borderTopRightRadius and borderBottomRightRadius. Border radius is solved separately but it would seem like it's all in one, and for gradient do you mean this inner shadow or something else?
It's because inset shadow does not exist in RN, but it can be faked quite realistically. Read more here: https://github.com/facebook/react-native/issues/2255.
If you really wan't to use gradient, you must use https://github.com/react-native-community/react-native-linear-gradient and position it absolutely over everything and just set it in the background using zIndex property.
How can I create horizontal layout with fullscreen scrollbar? Like "Store" app in Windows 8. I use WinJS
Try this, flexbox:
http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx
There is a property called ‘flex-direction’which allows you to change a row to a column, i.e. the elements would be aligned vertically. It is also possible to reverse the direction, i.e. the last element in the container would appear first in the list. This property can take the values – ‘row’, ‘row-reverse’, ‘column’ and ‘column-reverse’.
Imagine a small red box (CALayer instance) drawn in the lower left corner of its parent layer (which is the root layer of a layer hosting NSView).
When the frame of the parent view changes, the red box should remain at the same position on the screen. I do this by adjusting it's position relative to the lower left corner of the parent view .
The problem is that in some cases there is flickering and I can see the red box layer being drawn in the lower left corner of the extended frame before it is shown at the correct position.
I assumed that wrapping the frame and position change into one CATransaction would make both changes together, but that doesn't always work (the docs say that by using a transaction the animations will start at the same time, but there still seems to be a race condition at times).
How can I adjust the frame of the parent NSView while keeping the child layer at its perceived position?
Example and code:
My own ideas:
Hide red box layer, update the position, show it again
Use constraints to bind it to the right corner. Problem is that this offset could also change and I would have to update the constraint which could lead to the same flickering issue.
Try deleting the code you have already made to have the layer move with the view and put this where you are creating the layer.
boxLayer.autoresizingMask = kCALayerMaxXMargin | kCALayerMinYMargin;