So i am working on putting a button in my application website. The thing is that the button css element keeps on resizing when i switch screen and i want it to stay like my other elements as well.
Here is my Button code in Home.Js:
import React from 'react';
import { Link } from "react-router-dom";
import HeroSection from '../../HeroSection';
import { homeObjOne, homeObjTwo, homeObjThree } from './Data';
import './Home.css';
function Home() {
return (
<>
<HeroSection {...homeObjOne} />
<Link to="/Sign-up">
<button className="button" type="button">
Sign In or Register Today!
</button>
</Link>
<HeroSection {...homeObjThree} />
<HeroSection {...homeObjTwo} />
</>
);
}
export default Home;
Here is my Home.css file
.button {
padding: 12px 64px;
border-radius: 5px;
border: 1px solid var(--primary);
color: rgb(0, 0, 0);
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease-out;
position: absolute;
left: 18.4%;
bottom: 450px;
}
.button:hover {
color: #fff;
background-color: #278087;
transition: all 0.2s ease-out;
}
I have tried putting position:absolute and position:relative but still causes the same issue and couldn't figure out why it keeps happening.
Related
I am having the weirdest problem with Safari (desktop and iOS versions).
So I am building an app for a client where I made a header that has a "< Go Back" in the upper left corner. This "< Go Back" is bound to a boolean "isInternal" prop. So if I use the Header component, if I write:
<Header>{stuff}</Header>
The component does not load the Go Back button. But, if I write:
<Header isInternal>{stuff}</Header>
It loads the Go Back button. Okay, all good.
Originally, the Go Back button was styled using CSS modules. But, due to a styling animation gimmick the client wanted that relied on values in my index.css file, I had to ditch the CSS module and bind the styles to the main css file instead. This was NOT a big deal -- the component renders just fine on Chrome, Edge, Firefox, and Opera. But, ever since I ditched the CSS Module, the component does NOT render on Safari at all. I inspect the element on the page that has the "isInternal" prop on it, and the html markup is showing! and so are the styles! But it's just...not appearing. At all.
If I bring back the CSS module file and use that instead, it comes back!
It's not an import issue, because I removed the CSS Module import and rewrote the markup where necessary (like replacing className={styles.container} with className="container", etc.) and again, all other browsers on desktop and mobile work perfectly fine but Safari.
I'm dumbfounded. I cannot figure out why it won't show in Safari. Does anyone have any ideas? Thank you!
EDIT: to include my code, here's the code that works:
Here's my header code, that WORKS:
import React from 'react';
import styles from './Layout.module.css';
import { useEffect } from 'react';
import { Link } from 'react-router-dom';
const Layout = ({ isProject, title, children }) => {
useEffect(() => {
document.title = title
});
return (
<>
<header>
<div className={styles.gobackcontainer}>
{isProject && <Link to="/"><span id={styles.goback}>Projects</span></Link>}
</div>
<a href="mailto:{*here's an email*}" className={styles.button}>Get in Touch</a>
</header>
<main className={styles.wrapper}>
{children}
</main>
</>
);
};
export default Layout;
And here's the code that does NOT work:
import React from 'react';
import { useEffect } from 'react';
import { Link } from 'react-router-dom';
const Layout = ({ isProject, title, children }) => {
useEffect(() => {
document.title = title
});
return (
<>
<header>
<div className="gobackcontainer">
{isProject && <Link to="/"><span id="goback">Projects</span></Link>}
</div>
Get in Touch
</header>
<main className="wrapper">
{children}
</main>
</>
);
};
export default Layout;
Let me also clarify it is ONLY the "goback" part that isn't rendering in Safari. (even though the markup and styles are showing on inspect.) Everything else renders fine with either CSS modules or style sheets.
EDIT #2: Here's my CSS from the module file, which I put in my index.css file after removing the module:
.gobackcontainer {
z-index: 1;
pointer-events: none;
}
#goback {
display: inline-flex;
align-items: center;
justify-content: flex-start;
line-height: 1;
pointer-events: all;
width: auto;
color: var(--dark);
font-weight: normal;
line-height: 1.5;
text-decoration: none;
}
#goback:before {
content: "";
display: block;
width: 9px;
height: 9px;
margin-top: -3px;
margin-right: 5px;
transform: rotate(45deg);
border-left: solid 2px var(--dark);
border-bottom: solid 2px var(--dark);
transition: 300ms ease-in-out;
}
* HEADER */
.wrapper {
display: block;
width: 100vw;
height: auto;
padding: calc(var(--spacing-xxxl) * 2) 0 var(--spacing-xxxl) 0;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-s);
z-index: 10;
}
/* BUTTON */
.button {
display: inline-block;
padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxxs)
var(--spacing-xxs);
text-align: center;
background-color: var(--light);
border: solid 2px var(--dark);
box-shadow: 2px 2px 0px var(--dark);
font-size: var(--p);
line-height: var(--pl);
color: var(--dark);
text-decoration: none;
transition: color 250ms ease-in-out, background-color 250ms ease-in-out,
box-shadow 250ms ease-in-out;
}
.button:hover {
color: var(--light);
background-color: var(--dark);
box-shadow: 0px 0px 0px var(--dark);
}
Again, the only thing not showing up in Safari when it's outside of the module is the "go back" stuff...for those wondering why I do not just keep the CSS Module file: there's certain text color animations that are tied to these classes that don't work if I have them in the module. (The animation works just fine, btw, even in Safari, so I'm not worried about that.)
I have a bootstrap navbar that on collapse displays the items outside of it. When collapsing I have a div that works as an overlay that covers the whole page, so the navbar menu does not stay on top of any content of the page. The problem happens when I hide the menu: the div disappears immediately and during the hiding transition of the menu it stays on top of the page's content.
I want to keep the menu transition, so how can I apply a transition to the div when it is hiding? I've tried a lot of approaches but all of them only apply the transition when the div shows and not when it hides.
Check this demo, please: https://codesandbox.io/s/d31eo
React (demo):
import React, { Component } from "react";
import { Container, Nav, Navbar } from "react-bootstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
data: []
};
}
componentDidMount() {
this.setState({
data: [
{ name: "Test1" },
{ name: "Test2" },
{ name: "Test3" },
{ name: "Test4" }
]
});
}
onClick = () => {
this.setState({ open: !this.state.open });
};
render() {
return (
<>
<Navbar
className={`nav ${this.state.open ? "open" : ""}`}
expand="lg"
sticky="top"
>
<Container>
<Navbar.Toggle aria-controls="navbar-menu" onClick={this.onClick} />
<Navbar.Collapse id="navbar-menu">
<Nav className="ml-auto">
{this.state.data.map((category) => (
<Nav.Link href="#" key={`category-${category.name}`}>
<span className="link">{category.name}</span>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<div className={`overlay ${this.state.open ? "open" : ""}`} />
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fA&ixlib=rb-1.2.1&q=80&w=1080" />
</>
);
}
}
CSS (demo):
.nav {
min-height: 55px;
width: 100%;
background-color: white;
border-bottom: 1px solid #979797;
}
.link {
font-size: 14px;
color: #3e433e;
line-height: 17px;
padding: 5px;
text-transform: uppercase;
}
.link:hover {
color: #000000;
text-decoration: none;
}
.overlay {
position: fixed;
}
#media (max-width: 1170px) {
.collapsing {
position: absolute !important;
z-index: 3;
width: 100%;
top: 75px;
}
.collapse.show {
display: block;
position: absolute;
z-index: 3;
width: 100%;
top: 75px;
}
.overlay.open {
height: 100%;
width: 100%;
position: fixed;
z-index: 2;
top: 55px; /* navbar min-heigth */
left: 0;
background-color: white;
}
}
Can you please check the below link code? Hope it will work for you. We have moved all declarations of .overlay.open to .overlay and added transition to .overlay(Default State), we don't need to add transition in .overlay.open.
For smooth transition we have added transition in height and opacity in Default State
transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out.
1. In Default state - .overlay:
height set to '0px' and opacity set to '0'.
2. In Open state - .overlay.open:
height set to '100%' and opacity set to '1'.
Please refer to this link: https://codesandbox.io/s/summer-microservice-6d4c6
Step 1:
Move the styles of the overlay to its base css definition. leave in the .open only the css which should change on open. In our case we will change the height, so add height:0 to base .ovelay css and height:100% to .overlay.open
Step 2:
Add a css transition (e.g. transition: height .5s ease) to the base css, and set tansition: none to .overlay.open. this way the transition will apply only when its not have .open class. So it wll openinstantly, and close animated.
Hopefully this was the desired output:
https://codesandbox.io/s/charming-drake-dbtce?file=/src/styles.css
There is no need for the overlapping div for cover full body. We can manage it by the CSS property.
Use the following code for solving your problem.
React code:
import React, { Component } from "react";
import { Container, Nav, Navbar } from "react-bootstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
data: []
};
}
componentDidMount() {
this.setState({
data: [
{ name: "Test1" },
{ name: "Test2" },
{ name: "Test3" },
{ name: "Test4" }
]
});
}
render() {
return (
<>
<Navbar
className={`nav ${this.state.open ? "open" : ""}`}
expand="lg"
sticky="top"
>
<Container>
<Navbar.Toggle aria-controls="navbar-menu" />
<Navbar.Collapse id="navbar-menu">
<Nav className="ml-auto">
{this.state.data.map((category) => (
<Nav.Link href="#" key={`category-${category.name}`}>
<span className="link">{category.name}</span>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMjA3fDB8MXxzZWFyY2h8Nnx8bmF0dXJhbHx8MHx8fA&ixlib=rb-1.2.1&q=80&w=1080" />
</>
);
}
}
CSS Code:
.nav {
min-height: 55px;
width: 100%;
background-color: white;
border-bottom: 1px solid #979797;
}
.link {
font-size: 14px;
color: #3e433e;
line-height: 17px;
padding: 5px;
text-transform: uppercase;
}
.link:hover {
color: #000000;
text-decoration: none;
}
#media (max-width: 991px) {
#navbar-menu {
position: fixed;
top: 57px;
left: 0;
right: 0;
background-color: #fff;
padding: 0 10px;
height: 0 !important;
transition: height 0.3s ease-out !important;
-webkit-transition: height 0.3s ease-out !important;
overflow: hidden;
}
#navbar-menu.show {
height: calc(100vh - 57px) !important;
}
}
So my aim is to have a base button component and then a variant button which has the same markup as the base button but obviously has different styling, animations.
My base file is button.js
import React from 'react';
import styled,{ keyframes, ThemeProvider} from 'styled-components';
import theme from '../../theme/default';
// import {rotatecw, rotateccw} from '../../../theme/keyframes';
const ButtonWrapper = styled.button`
position: relative;
color: ${(props) => props.theme.colors.primary};
width: 256px;
height: 64px;
line-height: 64px;
background: none;
border: 1px solid ${(props) => props.theme.colors.primary};
&:hover {
cursor: pointer;
color: ${(props) => props.theme.colors.grey};
border: 1px solid ${(props) => props.theme.colors.grey};
}
}
`;
const ButtonText = styled.span`
// transition: all 0.1s;
// tranform: scale(1, 1);
`;
function Button(props) {
return (
<ThemeProvider theme={theme}>
<ButtonWrapper>
<ButtonText>
{props.text}
</ButtonText>
</ButtonWrapper>
</ThemeProvider>
);
}
export default Button;
So far so good.
My AnimatedButton file is like that
import React from 'react';
import Styled, { keyframes, ThemeProvider} from 'styled-components';
import theme from '../../theme/default';
import Button from '../../components/button/button'
// import {rotatecw, rotateccw} from '../../../theme/keyframes';
const rotatecw = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`
const rotateccw = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
`
const AnimatedButtonWrapper = Styled(Button)`
transition: all 0.3s;
&:before,
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
transition: all 0.3s;
border: 1px solid ${(props) => props.theme.colors.primary};
}
&:hover {
cursor: pointer;
&:after {
animation-name: ${rotatecw};
animation-duration: 2s;
}
&:before {
animation-name: ${rotateccw};
animation-duration: 3s;
}
&:before,
&:after {
left: 96px;
width: 64px;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
`;
function AnimatedButton(props) {
return (
<ThemeProvider theme={theme}>
<AnimatedButtonWrapper>
</AnimatedButtonWrapper>
</ThemeProvider>
);
}
export default AnimatedButton;
What confused me is the bottom part. seems like a repeat ... How do I ensure it generates the same markup as Button ? I want my animated button to extend the markup and the css.
Eventually, is there a way to call my button this way
<Button animatedButton text="test"></Button>
When you extend a Button with styled(Button), you are essentially creating a more specific version of it and is planning to use the new specific one instead.
But when you want to use the button as:
<Button animatedButton text="test"></Button>
which is a variant passing in animatedButton as a prop, you are looking to incorporate these changes in the ButtonComponent itself.
const ButtonWrapper = styled.button`
All the normal button stuff
${props.animated && `
All the animation stuff goes here
`}
`
function Button(props) {
return (
<ThemeProvider theme={theme}>
<ButtonWrapper animated={props.animatedButton}>
<ButtonText>
{props.text}
</ButtonText>
</ButtonWrapper>
</ThemeProvider>
);
}
If you have lots of variants as such, creating styles for these like this can be excruciating. This is why styled-components has a helper library styled-theming that can help out. (It isn't going be much help for the animated part since that's pretty much adding code rather than changing.
I'm trying to create a black overlay for a picture featured in the header of my application, using ReactJS and CSS3. However, no matter what I do, it's not working. I've tried referencing old projects in the past, where I managed to pull it off, as well as explored StackOverflow for answers. But, nothing's worked.
Could somebody please help me understand what I'm doing wrong and how I can solve this? I'd really appreciate it.
Header.js
import React from 'react';
// import { Link } from 'react-router-dom';
import Button from 'react-bootstrap/Button';
import ButtonToolBar from 'react-bootstrap/ButtonToolbar';
import './header.css';
const Header = () => {
return (
<div className="header">
<h1 className="title">Linguist Otaku</h1>
<ButtonToolBar>
<Button href="/quiz" size="lg" id="quiz-btn">
Quiz Now
</Button>
</ButtonToolBar>
</div>
)
}
export default Header;
Header.css
:root{
--mainOpacity: rgb(0, 0, 0, .55);
}
.header {
background-image: url("../../images/italy.png");
opacity: var(--mainOpacity);
height: 30em !important;
}
h1 {
font-family: "Fjalla One";
text-align: center !important;
padding-top: 2em !important;
color: white !important;
font-size: 4em !important;
}
.btn-toolbar {
display: flex !important;
justify-content: center !important;
}
#quiz-btn {
font-family: "Roboto";
color: white !important;
margin-top: 3em !important;
background-color: transparent !important;
border: solid .05em white !important;
border-radius: 0em !important;
}
#quiz-btn:hover {
transition: all 0.5s ease-in-out;
background-color: var(--mainOpacity) !important;
}
To create an overlay, you should wrap the content in another div. Then with CSS, position it right in-front of the header/background like so: https://codesandbox.io/s/mystifying-ramanujan-sq491
Header.js
const Header = () => {
return (
<div className="header">
<div className="dark-overlay">
<h1 className="title">Linguist Otaku</h1>
<ButtonToolBar>
<Button href="/quiz" size="lg" id="quiz-btn">
Quiz Now
</Button>
</ButtonToolBar>
</div>
</div>
);
};
CSS
.dark-overlay {
background-color: rgba(0, 0, 0, 0.35);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can give a background image and black overlay together in the css to the "header" or your parent like this:
background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ),url("../../images/italy.png");
IconButton in #material-ui/core/IconButton is showing a weird elliptical background when I hover the cursor over it.
I thought it is a mistake by me, so I just copied the code from material-ui website, but the problem remains.
However, when I created new react project, and created an icon button in it, the background was the usual circle.
I'm new to react and can't figure out what is going on, I'm using icon button without any explicit styling,
App.js
import React, { Component } from 'react';
import './App.css';
import { IconButton } from '#material-ui/core';
import WorkIcon from '#material-ui/icons/Work';
import CssBaseline from '#material-ui/core/CssBaseline';
class App extends Component {
render() {
return (
<div>
<CssBaseline />
<IconButton>
<WorkIcon />
</IconButton>
</div>
);
}
}
export default App;
App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.MuiCardContent-root-29 {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 500px;
height: 300px;
margin: auto;
background-color: #f3f3f3;
}
.login {
margin-top: 50px;
margin-left: 50px;
}
.form-group {
margin-bottom: 35px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import './index.css';
import App from './App';
import store from "./store/index";
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
registerServiceWorker();
index.css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 50px auto;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
.tableHeader {
background-color: green !important;
}
.header {
color: green;
font-weight: bold;
}
.edit {
height: 30px;
cursor: pointer;
}
.delete {
height: 20px;
cursor: pointer;
padding-left: 10px;
}
This problem persists in my whole project wherever I use icon buttons, and not just with this file only. And when I use this same file in a new project it works as expected: No elliptical backgrounds.
EDIT:
The accepted answer works well. In my also case I tried setting the width in button of index.css to auto and it fixed the error too.
This is what I did to remove the elliptical shape:
<IconButton style={{borderRadius: 0}}>
<DeleteIcon/>
</IconButton>
Now, it will be a rectangular shape when hovered.
I don't know why the above two solutions didn't work for me. So I added margin and width to the parent element and padding-right to the child element in App.css.
//For the buttons on top
button.MuiButtonBase-root {
margin: 10px;
width: 50px;
}
button.MuiButtonBase-root span span {
padding-right: 50px;
}
//For the checkboxes
span.MuiButtonBase-root {
margin-left: 10px;
width: 45px;
}
span.MuiButtonBase-root span {
padding-right: 10px;
}
The problem is the button CSS in your index.css. It is setting the width of all buttons to 100px. IconButton is implemented via a button tag around the icon.
Fixing the look of IconButton is easy -- just remove that button CSS. The more tedious part is that presumably you want that button styling on all your other buttons.
One way to handle this is to change the following in index.css:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
to be a CSS class rather than targeting all buttons:
.standard-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
width: 100px;
}
and then change places where you are rendering button elements to use:
<button className="standard-button">
instead of just <button>.
This worked for me
<IconButton style={{height:"45px",marginTop:"20px"}}>
<DeleteIcon/>
</IconButton>
Hi you can override ripple root and child style to change border radius or background color.
const useStyles = makeStyles({
root: {
borderRadius: 0, // <---- icon button root style
'.MuiTouchRipple-ripple .MuiTouchRipple-child': { // <----this should change ripple style when clicked or touched
borderRadius: 0,
backgroundColor: 'red'
},
},
});
<IconButton className={classes.rippleRoot}>
<WorkIcon />
</IconButton>
OR MUI5 with sx props
<IconButton
sx={{
borderRadius: 0,
'.MuiTouchRipple-ripple .MuiTouchRipple-child': {
borderRadius: 0,
backgroundColor: 'red',
},
}}
>
<WorkIcon />
</IconButton>
use height and width with same value to have circular shade on hover-
<IconButton sx={{height:"40px",width:"40px"}}>
<WorkIcon />
</IconButton>