So I have a component which is basically a custom button, with position: fixed, and I need it to render twice, one next to the other, but how can I achieve this if this component has position: fixed ? Basically, Is rendered twice in the same position.
Here is my code, where FloatingButton is the component with the issue above:
return (
<div className="details">
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<Header {...headerProps} />
</Grid>
<Grid container className="inner-container" justifyContent="flex-end">
<Grid item>
{floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
</Grid>
<Grid item>
{floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
</Grid>
</Grid>
</Grid>
</div>
);
and here is the CSS from the Button component:
min-width: 80px;
max-width: 80px;
height: 80px;
border-radius: 40px;
position: fixed;
bottom: 32px;
right: 32px;
display: inline-flex;
border-color: transparent;
color: #fff;
overflow: hidden;
cursor: pointer;
transition: max-width 0.5s;
position:fixed: An element with position: fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. SO technically your code is working just fine.
Now if you want to achieve two "fixed buttons" side by side. One of the ways is:- you should make the container of the button to be position:fixed and render the button without a fixed position
You can also pass the value for right in props to FloatingButton
like,
For first button <FloatingButton right='32px'/> and for second one <FloatingButton right='132px'/>
and in the Button component, you can assign it as CSS property
Related
I am new to CSS.I am trying to move the position of button down which is overlapping with another button. I tried putting the button in different div, still facing the same issue. Below is my code
<div className="App">
{!showEvents && (<div>
<button onClick= {() => setShowEvents(true)}>Show Events </button>
</div>)}
{showEvents && (<div>
<button onClick = {() => setShowEvents(false)}>Hide Events</button>
</div>)}
<Title title={title} />
{showEvents && < Eventlist events={events} handleClick = {handleClick} />}
{showModal && (
<Modal handleClose={handleClose}>
<h2>Terms and Conditions</h2>
<p>Agree the terms and Conditions</p>
</Modal>
)}
<div>
<button1 onClick={() => setShowModal(true)}> Show </button1>
</div>
</div>
);
}
// Export the App component to consume/ import the component in some other pages.
export default App;
CSS code for two buttons
button{
display: inline-block;
padding: 10px 20px;
background: #f1f6;
border-radius: 8px;
font-weight: normal;
height: 40px;
}
button1{
display: inline-block;
padding: 10px 20px;
background: #f1f6;
border-radius: 8px;
font-weight: normal;
height: 40px;
}
In the above code, I need to move button1 down from button. Can anyone help me to resolve this issue.
The button is likely taking up the full space of the container div. Instead trying applying a margin to the container rather than the button
ie.
.button-div {
margin: 10px 0;
}
The problem is that you are not applying a margin on the button. You are applying padding, which is spacing from the border of the button inside towards the content.
You need to apply margin to it and it will still work. Div is a block element so if you put margin it will just scale up to match the needed height.
Applying margin to the div is also correct though depending on what you are trying to accomplish.
I have a navbar with position fixed, but in some ios devices it does not show, I googled it and I think it's an issue with the fixed position. So, I changed to absolute, but the navbar goes to the bottom of the page. Does someone know which css proprierty can I pass to centralized it on the top of the page?
I'm already using "top:0"
here's the code:
<Header>
<NewNavbar />
</Header>
header styled component:
export const Header = styled.header`
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
// padding: 0 20px;
min-height: 52px;
`;
I don't know if this could be another reason of why safari is not showing the navbar component, but the NewNavbar component also has some divs that only is displayed when it's in a mobile size
{mobileSidebar ? (
<Grid xs={6} item className={classes.mobile}>
<Button onClick={toggleDrawerMobile(true)}>
<MenuIcon />
</Button>
</Grid>
) : null}
UPDATE !!!! Thanks everyone! I could solve it by giving to the father div the height 100vh !!!
I wanted to make use of the breakpoints in the component from MUI v4 to let items of my Grid-System appear and disappear.
How can I make a smooth CSS transition for b from 0px to to definied breakpoint size 3 for xl? it works for me when I use %, but I can't figure out how to achieve the same with a Grid. It wont have width 0px
eg:
let show = true; //reactUseState
const toggle = (p) => {
return(!p);
}
<Grid container direction="row>
<Grid id="a" item xl={show?12:9}>{children}</Grid>
<Grid id="b" item xl={show?false:3}>{otherchildren}</Grid>
</Grid>
<Button onClick={() => toggle(show)}>Show 1 or 2 items</Grid>
I hope someone knows the trick!
This should work:
<Grid container direction="row">
<Grid className="right" id="b" item lg={show ? 12 : 9}>{'otherchildren'}</Grid>
<Grid className={show? "left left-hide" : "left"} id="a" item lg={3}>{'children'}</Grid>
</Grid>
css
.right {
transition: ease 0.5s;
}
.left {
transition: ease 0.5s;
overflow: hidden;
}
.left-hide {
flex-basis: 0% !important;
}
I want tp use css to Material-UI component.
in MyCss.css
.trackTitle {
color:white;
}
in myComponent.js
import "./MyCss.css"
<Grid container item xs={1} className="trackTitle">
change color test
</Grid>
It doesn't change the color.
However the below works.
import "./MyCss.css"
<Grid container item xs={1} className="trackTitle">
<span className="trackTitle">
change color test
</span>
</Grid>
If I use basic tag span not Material-ui Grid
The class works.
See another case for component Slider
in MyCss.css
.mySlider {
height:"80px";
}
in myComponent.js
<Slider className="mySlider"
min={0} max={1} step={0.1}/>
not work.
<Slider className="mySlider" style={{height:"80px"}}
min={0} max={1} step={0.1}/>
works.
Now I understood className for component doesn't work.
Howeber, I want to use css to Material-UI component, how can I make it?
What you can do is to find the material-UI components CSS selector in the browser console, then override the css in your css file. Most likely this would work. Here is an example this is the root css for the slider
.MuiSlider-root {
color: #1976d2;
width: 100%;
cursor: pointer;
height: 2px;
display: inline-block;
padding: 13px 0;
/* position: relative; */
box-sizing: content-box;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
copy-paste it and then set your updates in the css
.MuiSlider-root {
/* update */
}
Material-ui is a css framework, if you want to use className for material-ui component
you have to injectFirst in root. example:
ReactDOM.render(
<StylesProvider injectFirst>
<App/>
</StylesProvider>
document.getElementById('root')
);
after this you will be able to use className anywhere on the app for any material-ui component
i have a specific use case, and i am not sure what component or technology i can use for that.
I have a set of items in a wrapped flexbox:
xxx|xxxxxxxx|xx|xxxxxxxxx|
x|xxxxxx|xxxxxxxxxxxxxxx|xxx|
xxxxx|xxxxxxxxxx|XXXX|xxxx
xxxx|xxxxx|xxxxxxxxx
The items have different widths, but fixed heights. And their should be wrapped, so that there is no horizontal overflow. And there is alway one "active" item, which has a diffent style.
For now flexbox works perfecly fine for me. Here's a demo:
.wpr {
width: 150px;
display:flex;
flex-flow: row wrap;
border: 1px solid green;
}
span {
position: relative;
display: inline-block;
padding: 0 2px;
}
span:after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 16px;
background-color: #111;
}
.special {
color: green;
}
<div class="wpr">
<span>xxx</span>
<span>xxxxxx</span>
<span>xxx</span>
<span>xxxxx</span>
<span>xxx</span>
<span>xxxxx</span>
<span class="special">XXX</span>
<span>xx</span>
<span>xxxxxxxx</span>
<span>xx</span>
</div>
But now i want to also highlight the complete row of the active item. The problem is, that i dont what items are in which row, because flexbox ist handling that.
For example:
xxx|xxxxxxxx|xx|xxxxxxxxx|
x|xxxxxx|xxxxxxxxxxxxxxx|xxx|
xxxxx|xxxxxxxxxx|XXXX|xxxx
xxxx|xxxxx|xxxxxxxxx
Just to see also in which row the active item is.
I am using React and Flexbox. But im not sure if thats possible with flexbox.
I could render every single item into a hidden DOM element to get its size and calculate the row-number by myself, but this is very hacky....
Do you know a trick to do that? Or maybe a different layout system, which is able to do that?
Edit: Examplecode:
<div style={{ display: "flex", flexWrap: "wrap", maxWidth: "960px" }}>
{this.state.myItems.map((w, i) => (
<div className={`${i !== this.state.activeIndex ? "playerword" : "playerword-active"}`} style={{ marginTop: "15px", fontSize: "1.3em", cursor: "pointer" }}>
<div className="olBack" style={{ padding: "3px" }}>
{w[0]}
</div>
</div>
))}
</div>
-Alexander