So I'm building a web app that contains a static header at the top that is always there on every page. I'm currently trying to find a function/method that could refresh the page I'm on without re-rendering the header.
Basically, I want to click the "Home" button and it refreshes the page Home but only the bottom part not the header. I've tried location.reload but it refreshes my entire page. Is there a way to only refresh the bottom part of my page?
The button that would refresh is in my header*
Here's my code for the main that renders my Header dumbed down:
Main.js
render(){
return(
<div className ="TextFont">
<Header {...this.props}/>
<div className="MarginTop">
<Grid>
<LastVisit />
<Row className="show-grid MarginTop">
<ButtonGroup vertical >
<NewRequest {...this.props}/>
<RequestInProgress {...this.props}/>
<Grid>
<Row className="show-grid">
<Col sm={6} md={12}>{this.props.actions[0].showRequest && <RequestGrid {...this.props}/> }</Col>
</Row>
</Grid>
</ButtonGroup>
</Row>
</Grid>
</div>
</div>
)
}
}
};
In Header, I want to call a method using a button to re-render the bottom part (so after < Header...>.
Thank you
Related
I have a simple one page app.
In the header, I have redirects to different parts of the website.
for some mysterious reason, the redirects for 'features' is not working all the way.
the redirect scrolls the user to somesort of half point. so a bit of the element is being cut off
here is the code::
https://codesandbox.io/s/bosky-active-ow4qs7
here is the features component:
https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/Features/index.js
here is the header component:
https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/NavigationBar.js
I found a few similar StackOverflow post such as this one but their solution i already implemented so I am not sure what the issue is.
i could add padding on top of the 'features' element, then wrap it with another element and make the header anchor tag point to the parent element. but i don't think i want to do that
In the feature component, put the margins in the col components instead of the row. It's related to the fixed navbar, the other elements must have a spacing top.
import { Row, Col, Image } from "react-bootstrap";
const Feature = () => {
return (
<Row id="features">
<Col sm={7} className="px-4 my-5">
<Image src="https://picsum.photos/900/400" fluid rounded className="" />
</Col>
<Col sm={5} className="px-4 my-5">
<h1 className="font-weight-light">Use widget from website</h1>
<p className="mt-4">
Create dyanmic reports such as pie graphs, histographs
</p>
</Col>
</Row>
);
};
export default Feature;
I am having an issue with Gatsby bootstrap or react-bootstrap (not sure yet, most likely it is bootstrap). Everything looks great when I build and serve gatsby website, it has all bootstrap classes and nice grid ( 2 columns, one is md="8" another is md="4"). But once I reload the page and when I inspect the code in the Chrome browser, bootstrap classes disappear.
Code in Gatsby page (added className just to make sure that it is not coming after reaload):
{window.innerWidth > 992 ? (
<Col md="8">
<NameAndHealine />
<ListingText />
</Col>
<Col md="4">
<PricingSidebBar />
</Col>
) : (
<Col xs="12">
<NameAndHealine />
</Col>
<Col xs="12">
<PricingSidebBar />
</Col>
<Col xs="12" className="mt-5">
<ListingText />
</Col>
)
Code example before page reload:
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
Code example after page reload:
<div class="col-12">...</div>
<div class="col-12">...</div>
Steps what I tried to solve the problem:
Import bootstrap.css and bootstrap.js inside gatsby-browser.js
Add extra className with bootstrap classes to make sure it is not coming after page reload.
EDIT:
I found the issue, it is with window.innerWidth as I was ordering components depending on it. I changed it to multiple rows and set display classes for different screens. After page reload Gatsby doesn't take classes when it is inside if (window.innerWidth > 992) (why?). If someone knows the answer please let me know, thanks.
EDIT 2
Added extra code above
I'm using react-admin 2.6.2 and trying currently to edit the layout of the List view. At first I wanted to remove action buttons completely, and I found the answer here at Stackoverflow. I thought, that using empty CardActions would be enough, but there's still empty ListToolbar taking space before my <List> starts. The toolbar is created by List automatically, is there any way to for example edit styles of that toolbar so I could hide it or set the height to 0px?
I guess one option is to create my custom List.js based on this, but it would be best to use the original source files, so they are also updated when there are new updates to react-admin.
JS code:
const NoneActions = props => (
<CardActions />
);
class DemoList extends Component {
render() {
return (
<div>
<List
{...props}
actions={<NoneActions />}
>
<Datagrid>
<TextField source="name" />
<ShowButton />
</Datagrid>
</List>
</div>
);
}
}
Here's the toolbar in DOM:
<div class="MuiToolbar-root-519 MuiToolbar-regular-521 MuiToolbar-gutters-520 ListToolbar-toolbar-293">
try: <List actions={null} {...props}> the empty space before the list disappears.
I have a login button in home page. When I click on that it will redirect to login page in chrome and edge but not in firefox. I am not able to get how to resolve this. Please help me fixing this.
export default class Welcome extends React.Component{
render(){
let button
if(this.props.status){
button = <LogoutButton onClick={this.props.logout} />;
}else{
button = <LoginButton />;
}
return(
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Typography variant="h5">
Welcome
</Typography>
{button}
</header>
)
}
}
function LoginButton() {
console.log("test")
return (
<Button variant="contained" color="secondary" style={{margin: '2rem'}}>
<Link to="/login">Log In</Link>
</Button>
);
}
function LogoutButton(props) {
return (
<Button onClick={props.onClick}>
Logout
</Button>
);
}
And in console it is showing the below warning in only firefox
"The Components object is deprecated. It will soon be removed"
It's confusing behavior due to the browser differences, but the Firefox behavior is reasonable.
In the end, by having a Link inside a Button you are producing html like the following:
<button>Log In</button>
In Firefox, it appears that the button receives the click event and doesn't pass it through to the a element.
One way to fix this is to have the Material-UI Button use Link as the outer component:
<Button
component={Link}
to="/login"
variant="contained"
color="secondary"
style={{ margin: "2rem" }}
>
Log In
</Button>
This also fixes some styling issues (text being underlined/blue) with your initial approach (though you may have overridden the default a styles in your app so that this wasn't noticeable).
Below is a CodeSandbox demonstrating three login button approaches:
The solution approach with component={Link} to="/login" as props on Button
A simple <button><Link to="/login">Log In</Link></button> version to show that this also doesn't work in Firefox
Your original version
I'm pretty new to the Material UI Library but I really like it so far! However, i am having an issue with the AppBar component overlaying over my other content. I currently have <AppBar /> and <myComponent /> in my App.js render method. Here is the code snippet for that:
render(){
return (
<div>
<AppBar />
<myComponent />
</div>
);
}
This is the code for the myComponent function:
function myComponent(){
return (
<h1>
Hello
</h1>
);
}
However, when I run this code, the "Hello" message is overlaid by the AppBar component. Is there some way to have my hello message (and corresponding code) be displayed under the AppBar? It's a simple question but I would love to figure this out!
You need to add the top margin from top to the component which you have created right below the app bar
I am posting this from mobile if you need code just let me know I will right it for you
You can add paddingTop to the containing div to compensate for the height of the AppBar (64px by default):
render() {
return (
<div style={{ paddingTop: 64 }}>
<AppBar>
<Toolbar>
<Typography variant="title" color="inherit">
Title
</Typography>
</Toolbar>
</AppBar>
<YourComponent />
</div>
);
}