Hi I have implemented buttons in my Navbar. This is coming from Mui .But after implementing them everything is static no matter what i do the margin or padding wont change. I am trying to create some space between them
Navbar.js
import { useContext } from "react";
import { Cont } from "../Cont";
import "./stylingfolder/Navbar.css";
import { Button } from "#mui/material";
function Navbar(){
const {setUser}=useContext(Cont)
function handleLogoutClick() {
fetch("/logout", { method: "DELETE" }).then((r) => {
if (r.ok) {
setUser(null);
}
});
}
return( <>
<nav className="navstyle">
<Button className="lb" href="/about" variant="contained">About</Button>
<Button className="lb" href="/restaurants" variant="contained">Explore</Button>
<Button className="lb" href="/myreservations" variant="contained">My Reservations</Button>
<Button className="lb" href="/blogs" variant="contained">Blogs</Button>
<Button className="lb" variant="contained" size="large" onClick={handleLogoutClick}>
Logout
</Button>
</nav>
Navbarcss
.navstyle{
background-color: rgb(19, 18, 18);
}
.navstyle lb{
margin-top: 12%;
}
You have a small mistake in the selector here
.navstyle lb{
margin-top: 12%;
}
It should be
.navstyle .lb{
margin: 12px;
}
Related
I am currently in the process of adding a stylesheet to my React Todo app. In the Todo component, two buttons are rendered that get the class clearButton or addButton depending on the label.
Button Component:
import './Button.css'
interface ButtonProps {
lable: string,
disabled: boolean,
onClick: MouseEventHandler<HTMLButtonElement>
}
export const Button: FunctionComponent<ButtonProps> = ({ lable, disabled, onClick}): ReactElement => {
let style: string = lable == 'ADD' ? 'addButton' : 'clearButton';
console.log(lable);
console.log(style);
return(
<div>
<button className= {`button ${style}`} type='button' disabled= { disabled } onClick= { onClick }>
{lable}
</button>
</div>
);
}
Strangely, only one styling of style class is ever applied to a button. It depends on which style class is in first place in the stylesheet. If the addButton class is in first place, only the styling of the addButton is displayed, if the clearButton class is in first place, only the styling of the other button is loaded.
.button {
width: 70px;
height: 25px;
border-radius: 10px;
border: none;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-weight: bold;
};
.clearButton {
background-color: #8c00ff;
}
.addButton {
background-color: #7ce0ff;
}
Addutional
Parent Component
export const InputBar: FunctionComponent<InputBarProps> = ({ enterTodo, handleEnterTodo, handleCreateTodo, handleClearTodos}): ReactElement => {
return(
<>
<div className="inputBar">
<form>
<TextField value={ enterTodo } onChange={ handleEnterTodo }/>
<div className="buttonsContainer">
<Button lable= 'ADD' disabled= { enterTodo == '' } onClick= { handleCreateTodo } />
<Button lable= 'CLEAR' disabled= { false } onClick= { handleClearTodos } />
</div>
</form>
</div>
</>
);
}
I am trying to figure out how something like this might occur. Bear with me, since the details might be a little bit sloppy.
I have a Header Component which simply takes up all the viewport, and then adds a NavigationBar Component. The Header Component works just fine in the other place I used it, but for some reason, when I tried reusing it just now, the NavigationBar inside it gets funky (all CSS is simply gone).
Here is the Header component that has the following styling (which works btw): {position: relative;
height: 100vh;
width: 100%;}
import React from "react";
import NavigationBar from "../NavigationBar/NavigationBar";
import "./Header.css";
const Header = (props) => (
<div className="blog-header">
<NavigationBar />
{props.children}
</div>
);
export default Header;
My NavigationBar is a simple React-Bootstrap Navbar (I have decided to delete what was inside navigationItems because I don't think those matter to the problem at hand):
import React from "react";
import { Container, Navbar, Nav, NavbarBrand } from "react-bootstrap";
import Logo from "../Logo/Logo";
import "./NavigationBar.css";
const navigationItems = []
const NavigationBar = (props) => (
<Container>
<Navbar id="navigation" bg="transparent" variant="dark" expand="lg">
<div className="div-brand d-flex flex-grow-1">
<NavbarBrand href="/">
<Logo />
</NavbarBrand>
<div className="w-100 text-right">
<Navbar.Toggle data-toggle="collapse" data-target="#da-navbarNav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
</div>
</div>
<Navbar.Collapse
className="text-uppercase flex-grow-1 text-right"
id="da-navbarNav"
>
<Nav className="ml-auto flex-nowrap">
{navigationItems.map((navItem, index) => {
return (
<Nav.Item key={index}>
<Nav.Link
id={navItem.id ? navItem.id : null}
href={navItem.path}
className={navItem.classes.join(" ")}
onClick={(event) =>
props.navItemClick(event, window.location.pathname, navItem)
}
>
{navItem.placeholder}
</Nav.Link>
</Nav.Item>
);
})}
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
);
Navbar.css code:
#navigation {
z-index: 10;
}
#navigation .div-brand {
align-items: center;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.75);
letter-spacing: 1px;
font-size: 0.95rem;
font-weight: bold;
line-height: 24px;
width: 6.4rem;
text-align: center;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:active {
color: #da3833;
}
.navbar-dark #btn-contact {
background-color: #da3833;
border-radius: 3px;
text-align: center !important;
}
.navbar-dark #btn-contact:hover,
.navbar-dark #btn-contact:active {
color: white !important;
}
#media (max-width: 992px) {
.navbar-dark .navbar-nav .nav-link {
text-align: right;
margin-top: 0.2rem;
margin-left: auto;
}
.navbar-dark .navbar-nav .nav-item {
text-align: right;
width: 100%;
}
.navbar-toggler {
outline: none !important;
}
}
I'm currently reusing it inside this component that has as styling the following:
.article-header {
height: inherit;
width: inherit;
position: absolute;
top: 0;
}
import React, { useState, useEffect, useCallback } from "react";
import Header from "../../../components/Header/Header";
import "./ArticlePage.css";
const ArticlePage = (props) => {
const [id, setId] = useState(null);
const loadQueryParams = useCallback(() => {
setId(props.match.params.id ? props.match.params.id : null);
}, []);
useEffect(() => loadQueryParams(), [loadQueryParams]);
return (
<div>
<Header>
<div
className="article-header"
style={{ backgroundColor: "black", opacity: "0.2" }}
>
{id}
</div>
</Header>
</div>
);
};
export default ArticlePage;
If you might have an idea where this might go wrong, feel free to answer. I'm also gonna leave here how the navigationbar should look, and how it rendered.
If you need any more info or details please announce me! Thank you!
EDIT: as requested, here is a demo
I managed to solve it. The problem was that my "bootstrap.css" folder that contains my bootstrap theme was not being imported globally in "index.js", and instead it was inside "index.html".
To be noted: I was also using a Router to go to this new Component in which I was using Navbar, and since the css files weren't imported globally, the css wasn't there.
I am new to React and Material-UI and I want to print my current dialog.
The problem is that I cannot find a way to maximize my Dialog for priting (set to fullScreen) without doing it in the Browser, too. So I basically want a smaller Dialog in my Browser and for the Dialog the maximal size.
Here is my basic code in TSX:
import React, { Component} from 'react';
import { Button, Dialog } from '#material/core';
export default class MUITester extends Component {
render(){
return (
<Dialog fullScreen={false}>
<div>
<Button onClick={() => window.print()}>
PRINT
</Button>
</div>
</Dialog>
);
}
And the corresponding css file:
#media print {
.print {
fullScreen=true;
color: blue;
}
}
Can I solve it using css? Or do I have to use React/Material-UI?
I solved it! Change the classes of Dialog:
<Dialog classes={{paperFullScreen: "prePrint printDialog"}} fullScreen>
Here my css:
.prePrint {
height: auto !important;
max-width: 600px !important;
}
/*Print Dialog*/
#media print {
.printDialog {
max-width: 100% !important;
}
}
You can set the width of your dialog like this:
<Dialog fullWidth={true} maxWidth='md'>
<div>
<Button onClick={() => window.print()}>
PRINT
</Button>
</div>
</Dialog>
As given in the Documentation
For printing div, which is inside dialog, use below code, and add css also
import React, { Component} from 'react';
import { Button, Dialog } from '#material/core';
export default class MUITester extends Component {
render(){
return (
<Dialog classes={{paperFullScreen: "prePrint"}} fullScreen>
<div id="DialogPrint">
some text some text , some paragraph and so on
</div>
<div >
<Button onClick={() => window.print()}>
PRINT
</Button>
</div>
</Dialog>
);
}
}
add below code in css
.prePrint {
height: auto !important;
max-width: 600px !important;
}
/*Print Dialog*/
#media print {
body * {
visibility: hidden;
}
#DialogPrint,
#DialogPrint * {
visibility: visible;
}
#DialogPrint {
position: absolute;
left: 0;
top: 0;
}
}
I was looking for a full-screen Dialog on mobile and a simple dialog for desktop and the below example resolved my issue, please take a look if helps.
import useMediaQuery from '#mui/material/useMediaQuery';
function MyComponent() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
return <Dialog fullScreen={fullScreen} />;
}
You can check demo on MUI official documentation.
You just need to add fullScreen flag to modal component in order to achieve full screen.
Like below
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
And if you don't want to use fullScreen, simply remove that fullScreen flag and don't need to use CSS here.
I couldn't get a JSFiddle to work properly with React and some other dependencies, so I hope the link to this Github repo is sufficient for demonstrating the issue:
https://github.com/ishraqiyun77/button-issues/
Basically, a group of buttons is rendered and they should be auto-widened to fill white space and take up the whole row. This works in Chrome, Edge, Safari, and Firefox. It looks like this:
This isn't happening in IE. I've been messing with it for hours and haven't made much progress:
Here is the code, although could clone the repo I posted above:
// component.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
Button,
Col,
Modal,
ModalBody,
ModalHeader,
Row
} from 'reactstrap';
import styles from '../assets/scss/app.scss';
class TestPrint extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
})
}
renderContent() {
let buttons = [];
for (let i = 1; i < 50; i++) {
buttons.push(
<Col key={i}>
<Button
key={i}
className='cuts-btn'
>
{i} - Test
</Button>
</Col>
);
};
return buttons;
}
render() {
return (
<div>
<Button
style={
{
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}
}
onClick={this.toggle}
>
Open Modal for Buttons
</Button>
<Modal
size='lg'
isOpen={this.state.modal}
toggle={this.toggle}
className='results-modal'
>
<ModalHeader toggle={this.toggle}>
Button Issues
</ModalHeader>
<ModalBody>
<div className='results-bq-cuts'>
<Row>
{this.renderContent()}
</Row>
</div>
</ModalBody>
</Modal>
</div>
)
}
}
ReactDOM.render(<TestPrint />, document.getElementById('app'));
.results-modal {
max-width: 1200px;
.modal-content {
.modal-body {
margin-left: 13px;
margin-right: 13px;
.results-bq-cuts {
width: 100%;
.col {
padding:2px;
}
.cuts-btn {
font-size: 11px;
padding: 3px;
width: 100%;
box-shadow: none;
}
// .col {
// padding: 2px;
// display: table-cell;
// flex-basis: 100%;
// flex: 1;
// }
// .cuts-btn {
// font-size: 11px;
// padding: 3px;
// width: 100%;
// box-shadow: none;
// }
}
}
}
}
I have all of the <Button> wrapped in <Col> because that should be what is filling the white space by increasing the size of the button.
Thanks for the help!
IE11 doesn't like working out the width of flex items. If you add flex-basis: calc( 100% / 24 ); to .col it works :) Obviously use any width you want, but what I've given replicates the 21 boxes on one line. But essentially flex-basis needs a defined width to work.
Or add an extra class to each element (such as col-1 ) This'll also achieve the same thing.
import React, { Component } from 'react';
class Buttons extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="displayButtons">
<input className='button1' onClick={this.props.get_menu_items_api}
value="Categories" type="button" ref="button"></input>
<input className='button2' onClick={this.props.get_addons_items_api}
value="Add Ons" ref="button1" type="button"></input>
</div>
)
}
}
export default Buttons;
I have these two buttons in react class.Their css is given below. What I want to do is on whichever button I click on it should turn orange and other should turn white. Initially Categories button is orange and Addons button is white.
I tried calling a function onClick that changes its class but how will it change the class of other button also.
.button2 {
border: none;
padding: 11px 32px;
text-align: center;
text-decoration: none;
line-height: 14px;
font-family: Roboto-Regular;
font-size: 12px;
border-radius: 2px 0 0 2px;
display: inline-block;
float: left;
}
.button1 {
background-color:#F6A623;
color: white;
}
.button2 {
background-color:white;
color: black;
}
You can save the status of the component identifier of the orange button and change it with using onClick.
Component:
class App extends React.Component{
constructor(){
super();
this.state = {
orangeButtonId: null
}
this.setOrangeButton = this.setOrangeButton.bind(this);
}
setOrangeButton(id){
this.setState({orangeButtonId: id});
}
render(){
return(
<div>
<input className={this.state.orangeButtonId === 1? "button1 orange" : "button1"} onClick={() => this.setOrangeButton(1)} value="Categories" type="button" ref="button" />
<input className={this.state.orangeButtonId === 2? "button2 orange" : "button2"} onClick={() => this.setOrangeButton(2)}
value="Add Ons" ref="button1" type="button" />
</div>
)
}
}
And styles:
input[type="button"]{
background-color: white;
}
input[type="button"].orange{
background-color: orange;
}
Check the fiddle https://jsfiddle.net/69z2wepo/83389/.
it can easily achived by using the component inner state + classnames library:
class Buttons extends Component {
constructor(props) {
super(props);
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
selectedButton: 'categories'
}
}
onButtonClick(e) {
this.setState({
selectedButton: e.target.value
});
if (e.target.value === 'categories') {
this.props.get_menu_items_api();
} else {
this.props.get_addons_items_api();
}
}
render() {
return (
<div className="displayButtons">
<input className={classnames({'button': true, 'selected': this.state.selectedButton === 'categories'} onClick={onButtonClick}
value="Categories" type="button" ref="button"></input>
<input className={classnames({'button': true, 'selected': this.state.selectedButton === 'addons'})} onClick={onButtonClick}
value="Add Ons" ref="button1" type="button"></input>
</div>
)
}
}
You need to keep track of button state within your class. When onClick is called set your state.
onButton1Click() {
this.setState({button1Down: true});
}
Then in the render call you need to use this state to set the class names to apply to your buttons.
render() {
let button1ClassName = 'button1';
if (this.state.button1Down) {
button1ClassName += 'button-down';
}
return ...