I want to render a button outside of the component's boundary. How can I do that? I have the styles looks like as shown below. The negative position works but the button get hidden by a sibling component. In the below image, the blue color is a sibling component. You can see the round button positioned in negative is hidden by the sibling component. Why? how can make it visible? I tried zIndex, but looks like it works only within the same component.
If the above question is not clear, let's say A, B, C are three components. A is the parent and, B and C are child components. I want to render a button from B and it must overlay on top of B. I don't want to render the button from component A. Any help appreciated.
Btn: {
position: 'absolute',
zIndex: 1000000,
width: 50,
height: 50,
top: -27,
left: 20,
backgroundColor: 'red'
},
The part where you render button, place that on the bottommost part of the render function where you are rendering the button and the siblings. Then with the absolute positioning, it would bet render last, and hence at the top. You wouldn't need z-index in this case. I hope I understood your problem correctly.
If it's android app use elevation property instead of z-index on B component
Related
I'm fairly new to ReactJS and am using styled components to display an image. The code I have in my App.js is <StyledImage src={mainimg} alt="hi"></StyledImage> which displays an image on the left side of the screen. My styling is
export const StyledImage = styled.img`
width: 80%;
`;
I've tried justify-content, alignitems... I'm not sure what exactly to type to get it aligned on the right side of its container. Any advice?
Use float: "right" as a style.
Ok so, you need to set the justify-content and align-item properties to the parent node of your image to move the child inside your parent. If you don't want to set any properties to the parent then use the position: absolute or position: fixed to your image.
I have a component that renders Tabs component from Material UI 5.0.0-beta.5
There is a case when I set this components display to none.
But, then I get this error -
Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.
I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).
Is there a way to fix this error or maybe a better way to do what I am trying to do?
You could try to use visibility: hidden instead
And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.
visibility: hidden;
width: 0;
height: 0;
And when you want to show it back:
visibility: visible;
width: 100%;
height: 100%;
I'm trying to render some pure components / a component which are basically RE charts in a carousel. So far I have implemented with images, but when I'm passing pure component / a component it is not showing anything.
I have created a sandbox which is having all the code which I have written so far with all the details SCSS, Re chart component and a main component. Please have a look and let me know what I'm missing or is there any other way where I can render components in a carousel.
Codesandbox URL
I'm not sure if this is what you are looking for.
Check my sandbox
The problem is that you need to define exactly the width and height of the svg also at its "containers", meaning that style={{ width: 500, height: 300 }} needs to be applied to li and ul too.
Also i changed a little bit the transform slide width.
I want a mini drawer on the left of my screen, like the example on the Material UI Documentation:
But in my case I want it to float over the content (like the variant="temporary" version of the component) when it opens, as currently it pushes the content.
If I handle the open prop to change the variant style dynamically it doesn't look very nice.
Is there any way of achieving this?
If you set the content's styling like this, it's position will not be effected by the drawer's state as you set its position to be absolute:
content: {
position: "absolute",
marginLeft: theme.spacing.unit * 7 + 1,
padding: theme.spacing.unit * 3
}
The Header text will ofcourse shift to the left when you open the drawer.
EDIT: I am going off of the codesanbox Material UI demo for the mini variant drawer here.
I'm trying to make a transition in which given a list of preview thumbnails, when I click on one, it scales it to the complete screen with all the additional details as required. Problem I'm having is that when I try using the properties position: 'absolute', top: 0, right: 0, left: 0, zIndex: 2 in order to place the component's full view on top of all other sibling components like a modal, for some reason, the child component is only able to cover the area that it's child component is covering as a thumbnail.
Structure:
-- Parent Component containing FlatList of Child Components
-- -- Child Component 0
-- -- Child Component 1
-- -- Child Component 2
-- -- Child Component 3
-- -- Child Component 4
The idea is to make something similar to the way it works in the iOS App store: https://vimeo.com/272028619
And this is another illustration how I need it to work like: https://vimeo.com/272027050
And this is how it looks like right now: https://vimeo.com/272027061
How is it possible for me to cover the complete area of the Parent Component as a child component?
Try styling your parent component as absolute and on each onclick event of your child component, toggle the z-index.
Hope this works :)
Position absolute doesn't work well inside FlatList. You can replace your FlatList with View and set position: absolute to the View component like below:
data.map((item) =>
<View style={{position: absolute}}>
<ChildComponent item={item}>
</View>
);
Now in your child component, you have to set top property of each card which will be sum of the heights of all the previous cards. Your applied animation will work after this.