How can I make the Fab button totally visible? Left half of it is always under left pane. Tried to increase z-index, but didn't work.
codesandbox
<UpperPane>
<Fab
style={{
position: "absolute",
left: "-25px",
zIndex: 999
}}
color="primary"
aria-label="add"
>
<AddIcon />
</Fab>
</UpperPane>
Modify CSS properties and it will work -
style={{
left: "-25px"
}}
const UpperPane = styled.div`
height: 100%;
width: 100%;
position:fixed; // add this property
background-color: yellow;
`;
Working sandbox here - https://codesandbox.io/s/splitpane-rqenw?file=/demo.tsx
That's the behaviour I want. Manged to create using mutation observer. If anyone has a better solution, perfectly welcome :)
sandbox
Related
I have successfully centered the Hello There button.
But my problem is, a little bit of lines are appearing on it.
I could put a background-color: white to solve it, but is there a better way to do this and a better coding? Like not using position: absolute etc....?
CLICK HERE FOR CODESANDBOX
<Stack
alignItems={"center"}
sx={{
marginTop: 2,
position: "absolute",
display: "flex",
left: 0,
right: 0
}}
>
<Button variant="outlined">Hello There</Button>
</Stack>
The Button variant you are using is the varian="outlined" which has a transparent background. So when is positioned above the dashed border they are shown behind it. In this case if you wan to keep this style of Button you have to add a background-colour of white to it.
Another option would be to use the contained variant like below but this would change the style of the button.
<Button variant="contained">
Hello there
</Button>
UPDATED:
or (for any reason you don't want to add the background colour to the button) you can add using :after or :before at the button, an element that will be behind the button and hide the dashed border. As a solution is not optimal as this will not work for dynamic backgrounds, or if they have an image or even a gradient color.
<Button
variant="outlined"
sx={{
position: "relative",
zIndex: "1",
"&:before": {
content: `''`,
background: "white",
width: "100%",
height: "10px",
position: "absolute",
zIndex: "-1"
}
}}
>
Hello There
</Button>
I think your question should be clearer but here is the answer of what I am thinking.
<Stack
sx={{
marginTop: 2,
position: "absolute",
width: "100%"
}}
>
<Button
variant="outlined"
sx={{
margin: "0px auto"
}}
>
Hello There
</Button>
I'm not too much familiar with CSS styling and want to achieve this screen.
I made a view which is splitted(diagonally), but actually I achieved it by using famous border trick in CSS,
const App = () => {
const Height=Dimensions.get("window").height
const Width=Dimensions.get("window").width
return <View
style={{
flex:1,
borderTopWidth:Height/2,
borderBottomWidth:Height/2,
borderRightWidth:Width/2,
borderLeftWidth:Width/2,
borderTopColor:"gray",
borderBottomColor:"red",
borderRightColor:"red",
borderLeftColor:"gray",
}}>
</View>;
}
Resulting View looks like this:
As you can observe that just borders are used in this view (View A) to construct trianglular view, and this view will behave like a background, and I want to put another view (View B) on top of View A having background transparent, so I can easily design my screen by staying in View B.
I tried setting position of View B to absolute but that is not working properly,
Kindly tell me comprehesive solution to this issue...
Hre is a sample example. First you need to have a container with a position: relative. Then you could position the inner divs with positions absolute and with a z-index.
.container {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.viewA {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 2;
background: yellow;
opacity: 0.5;
}
.viewB{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
z-index: 1;
}
<div class="container">
<div class="viewA">View B</div>
<div class="viewB">View A</div>
</div>
There is a style property called zIndex which tells the component to show in front or back depending on the value you give it to. zIndex default is 0 but you can give a bigger number than 0 to one of them and the component that has the higher value will show in front of the others.
Like;
<View>
<View style={{zIndex: 1}} />
<View style={{zIndex: 0}} />
</View>
In this example the first component will show in front of the other. Make sure they have the same parent.
Detailed Answer for those who are also trapped in such issues.
Finally now I'm able to design the screen in a way I want,
According to my question it was becoming difficult for me to put view on
top of another view, due to a reason, which was this that my Root View (View A), was totally built using borders.
Question: Why I'm using just border?
Answer: Actually I wanted to design background of my screen in such way(diagonally intersected), which was easy for me to build in a triangular way,
It is also a detailed discussion how triangles can be created, although there were many ways, but I opt the one which was easy for me.
I don't want to go in detailed discussion about triangle formation, I have already answered it on stackoverflow interested people can check out:
My Answer
Other Answers
Now I'm assuming nobody would have an issue in this matter that why I'm using just borders.
Coming Back to actual issue, I had just borders in main/root View (View A), means having no space inside the view to accomodate other Views as a Child.
I tried my things but was not working...
People are talking about some fancy words like zIndex, relative position, absolute position.
zIndex: lets the developer control the order in which components are displayed over one another.
relative position: it is default position of every component in each react native, which means our components will follow the normal order (in which components are written)
absolute position: you can explicitly change position of any component to absolute and that component now will not follow the order it will move to the top position inside the parent component (or to the top any direction which is mentioned by developer using Flex Direction)
As I didn't had space inside View A in my case, so it is even not looking apparently fine to put something inside a view having no space (just borders).
So I made a new parent on top of View A and View B, and my issue is resolved, because View A and View B are locating at same level, so we don't care eithor View A has a space inside it or not, we can simply overlap both Views...
Before showing exact code let me give some examples, According to the code below, all the Views will be layed out one after other, and all have default position (relative)
const App = () => {
const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width
return <View style={{height:Height,width:Width}}>
<View style={{height:300,width:300,backgroundColor:'purple',}}></View>
<View style={{height:200,width:200,backgroundColor:'blue',}}></View>
<View style={{height:100,width:100,backgroundColor:'gray',}}></View>
</View>
}
But as i change position of all views to absolute, they all move to the top of their primaryAxis (primaryAxis is defined by flexDirection it could be row or colum, by default it is column in react-native)...
const App = () => {
const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width
return <View style={{height:Height,width:Width}}>
<View style=
{{height:300,width:300,backgroundColor:'purple',position:'absolute'}}></View>
<View style=
{{height:200,width:200,backgroundColor:'blue',position:'absolute'}}></View>
<View style=
{{height:100,width:100,backgroundColor:'gray',position:'absolute'}}></View>
</View>
}
I fix my code like this.
const App = () => {
const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width
return <View style={{height:Height,width:Width}}>
<View style={{
flex:1,
borderTopWidth:Height/2,
borderBottomWidth:Height/2,
borderRightWidth:Width/2,
borderLeftWidth:Width/2,
borderTopColor:"gray",
borderBottomColor:"red",
borderRightColor:"red",
borderLeftColor:"gray",
}}></View>
<View style={{
position:'absolute',
height:Height,
width:Width,
backgroundColor:'transparent',
justifyContent:'center',
alignItems:'center'
}}>
<View style=
{{height:100,width:100,backgroundColor:'purple',borderRadius:20,margin:10}}>
</View>
<View style=
{{height:100,width:100,backgroundColor:'cyan',borderRadius:20,margin:10}}>
</View>
<View style=
{{height:100,width:100,backgroundColor:'pink',borderRadius:20,margin:10}}>
</View>
</View>
</View>;
}
I need to make fixed my tab bar headers which is opening in a drawer. Here is what I have tried.
Antd recommends react-sticky lib. Somehow it does not work. Maybe the reason is drawer scroll etc. Even if I hide the drawer scroll and create a scroll for tab body, sticky is not worked.
Ant Sticky Referans : https://ant.design/components/tabs/
react-sticky package : https://www.npmjs.com/package/react-sticky
position: -webkit-sticky;
position: sticky;
top: 0;
I also tried hard css but it does not work as well.
I look for Antd how handles the subject : fixed/sticky [sth]. So I find out Header from Layout component. Setting the style position fixed solved my problem. May be this is not a perfect solution but at least now in a drawer Tab Bar Headers are fixed.
Final codes are :
const renderTabBar = (props, DefaultTabBar) => (
<Layout>
<Header style={{ position: 'fixed', zIndex: 1, top: 0, padding: 0, width: '100%',
background: 'white' }}>
<DefaultTabBar {...props} style={{
top: 20,
}} />
</Header>
</Layout>
);
<Drawer
placement="right"
onClose={onClose}
visible={visible}
getContainer={false}
title={<> </>}
style={{ position: 'absolute' }}
width={"25%"}
keyboard={true}
closable={true}
closeIcon={<CloseOutlined />}
mask={false}
maskClosable={false}
headerStyle={{ border: 'none' }}>
<Tabs tabPosition="top"
renderTabBar={renderTabBar}
animated={true}
style={{ paddingTop: 20 }}>
{tabBody}
</Tabs>
</Drawer >
I have a component that has a state "style" which changes to a random color in my colors array whenever a button is clicked. The state is passed inside a style attribute so that the backgroundColor would become whatever the state is. This is working but whenever I try to add css to the button, it stops working as intended. I have a hunch that it could be due to the position absolute that I used but I have no idea why it's doing that.
All I could do was comment out the CSS to make the button work again but that really doesn't solve my issue.
import React, {Component} from 'react';
import "./Tap.css";
class Tap extends Component{
constructor(props){
super();
this.state={
style: ''
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
const colors = ["#68ad45", "#123456", "#987546", "#ab23c6", "#324517", "#456819"];
let i = Math.floor(Math.random() * 6);
this.setState({
style: colors[i]
});
}
render(){
return(
<div className="Tap" style={{backgroundColor: this.state.style}}>
<button onClick={this.handleClick}>Click Here</button>
</div>
);
}
}
export default Tap;
// ========================== CSS file ==========================
.Tap button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
outline: none;
padding: 10px;
font-size: 200px;
cursor: pointer;
}
No error messages, just no result coming from the button after it's been styled with the css.
This is because: position: absolute which is added to button,
So Tab div have no height now
One solution: is to div that div fixed height:
.Tap {
height: 50px;
}
See Example 1
But if you noticed that the tab not aligned with button because of absolute position.
Other Solution position the Tab not the button as absolute with some padding:
See example 2
Just do this simple change <button onClick={this.handleClick} style={{backgroundColor: this.state.style}}>Click Here</button>
check sample code - https://stackblitz.com/edit/react-soy8a4
I trying to use modal with transition using Material UI and have problem to centering it and also make it responsive or center in small size screen (mobile).
Modal can be centered and looks good on small size if not using transition, but if i add a transition, modal can't be centered or responsive.
This is the code modal without transition link.
Works good with large or small screen size.
This is the code modal with transition link.
I tried to change the value of top & left but still can't get centered at the large and small screen size :
function getModalStyle() {
const top = 25;
const left = 25;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
Can anyone help me?
By default the modal creates a parent container that uses flex, so in order to center you can comment your left: property that it is set to your modal,
return {
top: `${top}%`,
margin:'auto'
// left: `${left}%`,
// transform: `translate(-${top}%, -${left}%)`,
};
and in your modal container you can align items with this
<Modal
...
style={{display:'flex',alignItems:'center',justifyContent:'center'}}
>
https://stackblitz.com/edit/react-1ny5g7?file=demo.js
This works for me:
function getModalStyle() {
return {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
};
}
This worked for me:
{
width: '100%',
maxWidth: '100vw',
maxHeight: '100%',
position: 'fixed',
top: '50%',
left: '0',
transform: 'translate(0, -50%)',
overflowY: 'auto'
}