I'm trying to align and size a react component under a Navbar using react-bootstrap v0.33.1. I want the map to have the full width of the Navbar component and be centrally aligned beneath it. However, no matter how I place the component, it will do one of the following:
If I use the <Grid> and <Col> component to wrap the <Map> component, then the map is too far to the right.
export default function Map() {
return (
<Grid>
<Col md={12}>
<MapContainer />
</Col>
</Grid>
);
}
If I remove <Grid> and then I end up with the` component being the full width of my device screen.
export default function Map() {
return (
<MapContainer />
);
}
Here are the other components:
function MapContainer(props) {
const mapStyles = {
width: '100%',
height:'500px'
};
return (
<div>
<Map
google={props.google}
zoom={10}
// style={{
// width: "300px"
// }}
style={mapStyles}
initialCenter={{
lat: 47.6128856,
lng: -122.3631801
}}
/>
</div>
)
}
function App() {
return (
<div className="App container">
<Navbar fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Skatespots</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
{ isAuthenticated
? <NavItem onClick={handleLogout}>Logout</NavItem>
: <>
<LinkContainer to="/signup">
<NavItem>Signup</NavItem>
</LinkContainer>
<LinkContainer to="/login">
<NavItem>Login</NavItem>
</LinkContainer>
</>
}
</Nav>
</Navbar.Collapse>
</Navbar>
<AppContext.Provider value={{isAuthenticated, userHasAuthenticated}}>
<Routes />
</AppContext.Provider>
</div>
);
.App {
margin-top: 15px;
}
.App .navbar-brand {
font-weight: bold;
}
I do not know what the issue is and this simple issue is being such a pain. using a negative margin value seems like it'd be the wrong way to fix scenario 1 and using a fixed width with px seems like it wouldn't be dynamic for different screen sizes for scenario 2. Thanks.
Related
I have the following use case described in the image below.
I'm using Bootstrap 5 & React with Typescript
There are two components in a page called MainPage.tsx called Component1.tsx and Component2.tsx
Component2 has many more elements/content than Component1, so I want to put a scrollbar into it
I want Component1 to be the same height as Component2
On screen sizes with a width larger than >=768px (Boostrap .md breakpoint) I want the Component2 to be to the right of Component1. On mobile-like screens with widths >=576px (Bootstrap .sm breakpoint), I want Component2 to be right below Component1. In both modes, Component1 maintains its scrollbar.
However, what happens in my current code is that on mobile-like screens (when Component2 is below Component1), there is a big empty space between the two components.
My current code looks like this:
// MainPage Component
const MainPage = () => {
}
return (
<div className='d-flex flex-column flex-lg-row'>
<Component1 />
<Component2 />
</div>
)
}
export { MainPage }
// Component1.tsx
const Component1 = () => {
return (
<div className='flex-column flex-lg-row-auto w-100 w-lg-300px w-xl-400px mb-10 mb-lg-0'
style={{ overflow: 'scroll', overflowX: "hidden", height: "100vh" }}>
<div className='card card-flush'>
<div className='card-header pt-7'>
<OtherComponent1>
</div>
<div className='card-body pt-5'>
<div
className='scroll-y me-n5 pe-5 h-200px h-lg-auto'>
<OtherComponent2> />
</div>
</div>
</div>
</div>
)
}
export { Component1 }
// Component2.tsx
const Component2 = () => {
return (
<div className='flex-lg-row-fluid ms-lg-7 ms-xl-10'>
<div className='card' style={{ height: '100vh', overflowX: "hidden" }}>
<OtherComponent3/>
</div>
</div>
)
}
export { Component2}
However, what happens is that with this code, in boostrap .md screen-sizes it works as intended, but in bootstrap .sm screens-sizes, there's a big empty space between the two components. I suspect the problem is due to the "100vh" in Component1.tsx
What is the culprit and how can I solve it?
I'm working on a react app and facing some issues with css.
This is my setup:
Router
class App extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route element={<WithNavbar />}>
<Route path="/" element={<MainPage />} />
</Route>
<Route element={<WithoutNavbar />}></Route>
</Switch>
</HashRouter>
);
}
}
export default App;
With Navbar
export interface IWithNavbarProps {}
const WithNavbar: React.FunctionComponent<IWithNavbarProps> = (props) => {
return (
<>
<Navbar />
<div className="main">
<Outlet />
</div>
</>
);
};
export default WithNavbar;
Main Page
const MainPage: React.FunctionComponent<IMainPageProps> = (props) => {
return (
<div className="full-size">
<div className="half-size ">
</div>
</div>
);
};
export default MainPage;
the CSS
.main {
min-width: 100vh;
min-height: 94vh;
max-height: 94vh;
}
.full-size{
width: 100%;
height: 100%;
}
.half-size{
width: 50%;
height: 50%;
}
With the upper setup, for some reason, the div with half-size has a width/height of 0 (not visible at all).
if I apply following change to MainPage, half-size works kind of (div is visible 50% of screen height, is squared)
return (
<div style={{width: '100vh', height: '100vh' }} className="">
<div className="half-size ">
</div>
</div>
);
However, if I apply this change in MainPage, half-size does not work again
return (
<div className="main">
<div className="half-size ">
</div>
</div>
);
I don't understand this behaviour. Why does the reference to the grandparent not work? Why does inline style work? And why does the size setup of class main not work on MainPage level? (other properties such as background do work)
I have this code, which, for some reason, will grow when I resize a window, but not shrink. I was wondering how to remedy this.
https://codesandbox.io/s/react-chartjs-2-example-1nur4
import React from "react";
import { render } from "react-dom";
import LineDemo from "./LineDemo";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const App = () => (
<div style={styles}>
<table style={{ width: "100vw", borderCollapse: "collapse" }}>
<tbody>
{Array.from({ length: 4 }, el => "foo")
.concat(<LineDemo />)
.map(el => (
<td style={{ border: "solid" }}>{el}</td>
))}
</tbody>
</table>
</div>
);
render(<App />, document.getElementById("root"));
Have a detailed look at https://www.chartjs.org/docs/latest/configuration/responsive.html. The Important Note section mentions how responsiveness can be achieved. It states that
Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size.
In your case, the parent container for the line chart is the <div> element. The render function of LineDemo component in LineDemo.js file then can be modified to look like:
render() {
return (
<div style={{ position: "relative", margin: "auto", width: "80vw" }}>
<h2>Line Example</h2>
<Line ref="chart" data={data} />
</div>
);
}
Here is a working example: https://codesandbox.io/s/react-chartjs-2-example-hzygw
What worked for me was to add chart container a width style:
<div style={{width: '99%'}}>
<Bar options={options} data={data} />
</div>
However if I set width 100% it won't work lol
When I call my SideBar component in App.js it appears on top of everything with the main page under it and I understand why it does this but I don't know how to get it so that the sidebar appears to the left of the screen with the main app component it right next to it.
Here is my code:
const AppRoute=({component:Component, layout:Layout,...rest}) => {
<Route {...rest} render = {props=> (
<Layout>
<Component {...props}/>
</Layout>
)}/>
)
const MainLayout = props =>(
<div>
<SideBar/>
{props.children}
<div>
class App extends Component {
render() {
return(
<BrowswerRouter>
<div>
<Switch>
<AppRoute path = "/dashboard" layout={MainLayout} component={Dashboard}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
Any help is greatly appreciated!
const MainLayout = props =>(
<div style={{display: 'flex'}}>
<SideBar style={{flex: '1 auto'}} />
{props.children}
<div>
try this maybe
you could also apply float: left on both the sidebar, and the main content elements, giving the sidebar a fixed width
or you could try css grid:
const MainLayout = props =>(
<div style={{display: 'grid', gridTemplateColumns: '200px auto'}}>
<SideBar />
{props.children}
<div>
This material UI code generates a ul with a bunch of <img /> tags as the li. I'm trying to override the width for these <img /> tags, but for some reason material UI classes override doesn't seem to be registering. Anyone have any clues about this?
const styles = theme => ({
tile: {
width: '100%',
}
});
function SingleLineGridList(props) {
const { classes, tileData } = props;
return (
<div>
<GridList cols={2.5}>
{tileData.map(tile => (
<GridListTile classes={{root: classes.tile}} key={tile.img}>
<img src={tile.img} alt={tile.title} />
</GridListTile>
))}
</GridList>
</div>
);
}
export default withStyles(styles)(SingleLineGridList);