score:57
you can make bottomnavigation
stick to the bottom of your screen with the following css:
const styles = {
sticktobottom: {
width: '100%',
position: 'fixed',
bottom: 0,
},
};
and then applying it to your bottomnavigation
component:
<bottomnavigation classname={classes.sticktobottom}>
you should be aware that the position: 'fixed'
will cause the the bottom navigation component to cover up your content (similarly, the appbar
stickied to the top of your screen also covers up content if you do not use a margin). you'll need to provide a marginbottom
or some other kind of padding to ensure none of your content is hidden.
you can also play around with some of the other position
options, such as sticky
or absolute
. however, in my experience, fixed
is the option that most closely suits your needs.
score:0
you could change the <header>
by component
attribute of the appbar
.
score:0
you can set the position of the bottomnavigation
to fixed
and bottom
to 0
to put it at the bottom of the viewport.
<bottomnavigation sx={{ position: 'fixed', bottom: 0, width: 1.0 }}
but a fixed
element is taken out of the normal document flow, and may overlap with the content of the body. one way to solve it is to set the paddingbottom
of the content based on the height of the bottomnavigation
(which currently from the source is 56px
)
<box paddingbottom='56px'>
<content />
</box>
<bottomnavigation sx={{ position: 'fixed', bottom: 0, width: 1.0 }}>
<bottomnavigationaction label="recents" icon={<restoreicon />} />
<bottomnavigationaction label="favorites" icon={<favoriteicon />} />
<bottomnavigationaction label="archive" icon={<archiveicon />} />
</bottomnavigation>
reference
score:2
to whom needs to use it inside an appbar
, mixing won't cause any padding conflict.
<appbar position="fixed" color="primary" style={{top: "auto", bottom: 0}}>
<bottomnavigation value={0} onchange={(event, newvalue) => {}}>
<bottomnavigationaction label="one" icon={<locationonicon/>}/>
<bottomnavigationaction label="two" icon={<locationonicon/>}/>
</bottomnavigation>
</appbar>
Source: stackoverflow.com
Related Query
- MUI BottomNavigation is not sticky by default
- MUI Object in Select default value not showing but shows when object selected
- MUI AutoComplete default value not shown?
- SyntaxError: unknown: Namespace tags are not supported by default
- Attempted import error: 'uuid' does not contain a default export (imported as 'uuid') In React
- React.js - default prop is not used with `null` is passed
- How to make the dev tools not show up on screen by default in Electron?
- Error: Image Optimization using Next.js default loader is not compatible with `next export`
- How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."
- Property 'value' does not exist on type 'never'. when use useRef hook in mui
- MUI - Outlined select label is not rendering properly
- Default query params not getting passed in axios request
- Reactjs: In JavaScript, class methods are not bound by default
- export default not working webpack, reactjs
- Gatsby - Warn Attempted import error: 'css' does not contain a default export (imported as 'styles')
- MUI next Tooltip does not show on hover
- Setting a default value with react-select not working
- MUI Fade component does not show, hide, or fade components
- Attempted import error: 'path-to-regexp' does not contain a default export (imported as 'pathToRegexp')
- React useState does not seem to accept a default value here?
- Heroku "content not from webpack is served from /app/public" despite using all default create-react-app config
- Fixing " 'Component' does not have any construct or call signatures." error for default props with Typescript
- How to test default props functions is attached to component or not ? | React | Jest | Enzyme
- The default export is not a React Component in page: "/" NextJS
- Attempted import error: does not contain a default export
- Mui v5 styleOverrides not working with themes
- MUI v5 + Storybook: Theme and font family do not work in storybook
- MUI's Autocomplete AS MULTIPLE input + react-hook-form + controlling default values not working (TypeError: Can't read property 'filter' of undefined)
- Google Analytic GA4 does not disable default page_view event in React Application
- TextField default value from parent not rendering on child
More Query from same tag
- Remove a child from firebase without knowing the key
- How can I access useParams value inside redux selector as ownProps
- How to design my React project better without using shouldComponentUpdate
- React Router v6 changes URL but doesn't render
- KeyError 'image' when uploading image to flask backend from React frontend
- react-virtualized: SetState in AutoSizer
- Possible to use CSS transitions with textarea rows value?
- Can't generate webpack-assets.json with webpack-isomorphic-tools
- React table is getting sorted on filter
- How to refresh another page in react JS
- React Table not sorting numbers correctly
- Integrating Stripe payment in React js
- How do I tell which version of Material UI to install for my react app?
- Making a Styled component (img) behave like a button
- React TextArea Component - How to use getInititalState() in ES6?
- Why does Hot Module Replacement stop working on webpack dev server when I setup Babel es2015 preset?
- Nesting under IndexRoute
- React JS TypeError - this is not a function
- Sending data on submit using POST request to API with React, Express, and NodeJS
- antd checkbox inside a button
- Cannot read property 'getState' of undefined error
- Class variables in React with ES6
- Redux state doesn't update with action dispatch
- How to use React.useContext in a function that does not render any components?
- Iterating IDs to send in an API call
- How can I reduce the width of the dropdown of the select?
- Uncaught TypeError: Cannot read property 'map' of undefined in react
- React edit form creating
- Why is the div not getting returned when the condition is met in React?
- Import a library only on the server side to use in getInitialProps