I am using facebook login at my login page, my website is fully responsive, but my facebook login button is not responsive. (i.e when i am using small screen size, facebook login button should change it's with)
Please refer images below:
1) Normal case:
2) When Screen is resized to pixels less than 399 (screen width < 400)
3) How i want it to be (in resized browser on PC, or on mobile)
My react code is:
<div style={{display: 'flex',flexWrap: 'wrap' }} >
<FacebookLogin
appId={facebookAppId}
autoLoad={false}
fields="name,email,picture"
callback={this.props.SocialSignUp}
cssClass="btnFacebook"
icon={<i className="fa fa-facebook" style{{marginLeft:'5px'}}>
</i>}
textButton = " Sign In with Facebook"
/>
<GoogleLogin
clientId={googleClientId}
onSuccess={this.props.SocialSignUp}
onFailure={this.props.SocialSignUp}
className="btnGoogle"
>
<i className="fa fa-google-plus" style={{ marginLeft:
'5px' }}/>
<span> Sign In with Google</span>
</GoogleLogin>
</div>
My CSS is
.btnFacebook {
width: 165px;
height:35px;
border-radius: 4px;
background: #3b5998;
color:white;
border:0px transparent;
text-align: center;
margin:5px;
display: inline-block;
}
.btnGoogle {
margin:5px;
width: 165px;
height:35px;
border-radius: 4px;
background: #db3236;
color:white;
border:0px transparent;
text-align: center;
}
.btnFacebook:hover {
background: #3b5998;
opacity: 0.6;
}
.btnGoogle:hover {
background: #db3236;
opacity: 0.6;
}
#media only screen and (max-width : 399px) {
.btnFacebook,.btnGoogle{
width: 100%
}
}
Please note that I am using react-facebook-login package for rendering facebook button and react-google-login package for rendering google button.
Help Please!!!
Here is a simplified example using styled-components
It's using your css and resizing the way it should.
You can copy/paste this Component and import it into your app maybe it helps figuring out your problem.
import React, { Component } from 'react'
import styled from 'styled-components';
const Wrapper = styled.div`
#media only screen and (max-width : 399px) {
width: 10%
}
`
const BtnFacebook = styled.button`
width: 165px;
height:35px;
border-radius: 4px;
background: #3b5998;
color:white;
border:0px transparent;
text-align: center;
margin:5px;
display: inline-block;
&:hover{
background: #3b5998;
opacity: 0.6;
}
`;
const BtnGoogle = styled.button`
margin:5px;
width: 165px;
height:35px;
border-radius: 4px;
background: #db3236;
color:white;
border:0px transparent;
text-align: center;
&:hover{
background: #3b5998;
opacity: 0.6;
}
`
class Login extends Component {
render() {
return (
<div style={{ display: 'flex', flexWrap: 'wrap' }} >
<Wrapper>
<BtnFacebook >
Sign In with Facebook
</BtnFacebook >
<BtnGoogle>
Sign In with Google
</BtnGoogle >
</Wrapper>
</div>
)
}
}
export default Login
It seems working for me. Just did a work around on your code. Tell the exact error. It would be helpful. Here I attached the output.
Related
I have a react component called TeamBanner like so
import styles from "./teamBanner.module.css";
import { useNavigate } from "react-router-dom";
import { TeamBannerProps } from "../ProjectTypes.types";
export const TeamBanner = ({
team,
onBannerClick,
showName,
}: TeamBannerProps) => {
let navigate = useNavigate();
const handleOnClick = () => {
navigate(`/${team}`);
onBannerClick();
};
return (
<div
className={`${styles.container} flex theme-light ${
showName ? "" : styles["no-name"]
}`}
title={team}
onClick={handleOnClick}
>
<div>
<img
src={require(`../logos/${team}.svg`)}
alt="logo"
className={`${styles.logo} ${showName ? "" : styles["only-logo"]}`}
/>
</div>
{showName ? team : ""}
</div>
);
};
The teamBanner.module.css file is like so
.container {
margin: 0.25em;
align-items: center;
cursor: pointer;
top: 0;
z-index: 2;
background-color: hsl(var(--color-background));
padding: 0.1em 0.25em;
border-radius: 0.5em;
box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%);
font-family: var(--ff-serif);
font-size: var(--fs-200);
}
.logo {
display: inline-block;
vertical-align: middle;
width: 3vmax;
height: 3vmax;
}
.container:hover {
outline: 0.15em solid hsl(240, 90%, 67%);
}
.no-name {
border-radius: 0.25em;
}
.only-logo {
width: 5vmax;
height: 5vmax;
}
I am using it to create a list of team of a page & this works just fine.
However, I want to use it in another place also. In the place, the to now want the .container:hover effect & I want the font properties of the .contaner and width & height properties of the .logo changed.
How can I accomplish this? only changing these items of the module.css? Can any one help? Thanks
I want to change design of this particular scrollbar which is commonly used by all in the application. But on this particular page we don't want that.
Code for default CSS:
div::-webkit-scrollbar-thumb {
background-color: #216e7a;
width: 6px;
height: 69px;
border-top: 1px;
border-top-color: #394245;
border-top-style: solid;
}
I want to change it using emotion/css so far I did this but nothing is happening,
const noScrollBar = css
div::-webkit-scrollbar-thumb {
background-color:red,
width:20%,
overflow: scroll;
}
;
<div className={noScrollBar} > ....
Any suggestions, I am new to CSS selectors
You can create a css module with the styling:
.myClassName {
overflow: hidden;
overflow-y: scroll;
width: 200px;
height: 200px;
}
.myClassName::-webkit-scrollbar {
background: silver;
width: 10px;
}
.myClassName::-webkit-scrollbar-thumb {
background:red;
}
Then import it in your code:
import myStyles from './my-styles.module.css'
<div className={myStyles.myClassName} > ....
You can also use a simple css (not module):
import './my-styles.css'
<div className={'myClassName'} > ....
i am trying to get a button to overlap and be positioned at a certain place of a searchbar. Here is what it currently looks like. I tried using the transform: translateX() property but when I add a :hover element, the button gets moved back to its original position before the transform: translateX() event
But this is what i want it to look like.
Here is my css code. I'm using styled components.
const Button = styled.button`
display:block;
width:40px;
height:40px;
/* line-height:80px; */
border: none;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #0072FF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: translateX(-180%);
&:hover {
outline: none;
transform: scale(1.05);
}
`;
const Input = styled.input`
color: inherit;
border : none;
background: none;
padding-left: 10px;
width: 100%;
&:focus {
outline : none;
}
`;
const Form = styled.form`
background-color : white;
border-radius : 7px;
height: 5%;
width: 75%;
align-items: center;
display: flex;
transition: all .3s;
margin-left: 6%;
`;
const Img = styled.img`
height: 15px;
width: 15px;
margin-left: 10px;
`
And here are my components.
import React from 'react'
import NewChat from '../newChat/newChat';
import { Input, Form, Img } from './searchBar.elements';
function SearchBar() {
return (
<Form>
<Img src={require("../../../../assets/img/search.svg")} />
<Input placeholder="Find people and conversations" />
<NewChat />
</Form>
)
}
export default SearchBar;
import React from 'react'
import { Button} from './newChat.elements';
import plus from '../../../../assets/img/plus_button.svg';
function NewChat() {
return (
<div>
{/* <img src={require("../../../../assets/img/plus_button.svg")} /> */}
<Button>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"
fill="currentColor"
/>
</svg>
</Button>
</div>
)
}
export default NewChat;
First for the i am trying to get a button to overlap and be positioned at a certain place of a searchbar maybe you should use position: relative on your father component (Form) and position: absolute on your Button, with that your father becomes a parameter for the absolute position of the button so you can use the properties Left, Top, Right, Bottom to get it to the correct location.
const Form = styled.form`
...otherProperties,
position: relative;
`;
const Button = styled.button`
...otherProperties,
position: absolute,
right: 180px // for example
top: 50px // example
`;
Second for the when I add a :hover element, the button gets moved back to its original position before the transform: translateX() event I think it is because you change the TRANSFORM property inside Button.
const Button = styled.button`
display:block;
width:40px;
height:40px;
/* line-height:80px; */
border: none;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #0072FF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: translateX(-180%); // Here the transform property is translateX //
&:hover {
outline: none;
transform: scale(1.05); // Here the transform property translateX now becomes scale //
`;
To correct this you need to make the hover property not lose the previous one.
&:hover {
outline: none;
transform: translateX(-180%) scale(1.05);
}
I am learning css and react and a bit confused how to display:block for a component when a user clicks a button myButton. And to hide the component when the user clicks it again.
I am using mobile and desktop views and want the button to not show in desktop view, it will only show in Mobile view.
In Mobile view once the user clicks the button toggle component needs to show. That is where I dont know how onclick I can say for Toggle css to display:block to show entire component. Toggle shows in desktop view.
Here is code map.tsx
<div className={styles.controlsContainer}>
<Toggle />
</div>
<div className={styles.button_about}>
<AboutPopup />
<Button id=myButton
type="primary"
icon={<FilterOutlined />}
className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
></Button>
</div>
Here is how my map.module.scss looks like
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
float: left;
}
#media screen and (max-width: $mobileMax) {
.toggle {
display: none;
}
}
.button {
&_about {
#include for-desktop {
position: absolute;
bottom: 2em;
right: 2em;
}
#include for-mobile {
position: absolute;
top: 2em;
z-index: 1;
right: 2em;
z-index: 1;
}
}
}
.filterbutton {
width: 40px;
height: 40px;
left: calc(50% - 40px / 2);
top: calc(50% - 40px / 2);
background: $color-blue;
border-radius: 100px;
color: #83888c;
#include for-desktop {
display: none;
}
#include for-mobile {
position: absolute;
top: 4em;
right: 2em;
}
}
----- Update 2
So I did something like this
const [isShow, setIsShow] = React.useState(true);
const handleClick = () => {
setIsShow((prev) => !prev);
console.log(isShow);
};
return
(
<div className={styles.controlsContainer}>
<Toggle
className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>
)
But I am getting a parsing error on styles.toggle_show Parsing error: ',' expected.eslt
maybe this could help
import React from "react";
import "./styles.css";
export default function App() {
const [isShow, setIsShow] = React.useState(false);
const handleClick = () => setIsShow((prev) => !prev);
return (
<>
<div className={isShow ? "show" : "hide"}>my toggling component</div>
<button onClick={handleClick}>toggle show</button>
</>
);
}
css:
.show {
display: block;
}
.hide {
display: none;
}
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>