As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, it aligns ALL items, including the AppBar, in the middle which is not what I want. Any assistance would be greatly appreciated as I navigate through this issue (usually working as a backend developer).
A popular method for achieving this is by placing your AppBar in a sticky position next to an element that houses the main section of your app.
Here is a typical approach (using Grid as you are working with material-ui):
<Grid id="whole-app" style={{ position: "relative", height: "90vh" }}>
<Grid
id="appbar"
style={{ position: "sticky", top: 0, left: 0, right: 0 }}
>
Some AppBar content
</Grid>
<Grid
id="main"
container
justify="center"
alignItems="center"
style={{ height: "inherit" }}
>
<div>Main section</div>
</Grid>
</Grid>
You can view the live example here.
The concept here is simple: we have a parent container (#whole-app) with a specified height and positioning, with two child elements - the sticky AppBar and the main content area. The main section container uses display: flex (via the container prop), has a height for vertical alignment, and utilizes props for centering its children.
In your code sandbox, there were issues because align is not a valid Grid prop and the spacing prop was unnecessary.
On another note, I recommend exploring tailwindcss, which may be more beginner-friendly.
To align an element in the center, simply apply the display flex property to its containing parent like so:
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens. $(document).scroll(function() { navbarScroll(); }); function navbarSc ...
Can we replicate the outer glow effect that Safari and other browsers automatically add to an input field without using jQuery? If you want to remove it, check out this article: Thank you! ...
I currently have a sub menu that consists of 4 headers. The code snippet provided below is used to style the first element in each column of the submenu. My next task is to create a hover effect for these elements, where the background color changes to gr ...
I am trying to convert the ColorlibStepIcon functional component into a class component for my Stepper. Unfortunately, I have not been successful and keep encountering errors. I have attempted some changes but it is still not working as expected. You can ...
Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...
I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and d ...
Currently, I am honing my skills in ReactJS and Material-UI by working on creating a semi Twitter clone. However, I have encountered a challenge while trying to construct an input dialog box that is capable of accepting text, video, photo, and GIF all wit ...
This issue has been consuming my thoughts lately. I have a CSS-styled HTML page and a PHP page that retrieves the latest record from a MySQL database. The challenge is to display this information in the "leftContent" div of the HTML page. The PHP script & ...
Currently, I am facing an issue where the bootstrap button's size changes when hovered over. My intention is to have the bootstrap button remain a fixed size while only the text inside it changes using javascript for mouseover and mouseout events. How ...
I am trying to make the menu height responsive by setting it equal to the window height using CSS. I want the menu height to increase as the page length increases due to added elements. I have attempted using "height:100%" and "height: 100vh" in the styles ...
Upon executing a function, it retrieves all zones in an environment and then proceeds to make an API call for the border points of each zone. While all fetches are successfully executed, there's a problem arise in the then block for the initial fetch ...
For my exploration of Next.js, I started by setting up a new Next.js project and incorporating code to retrieve weather data: export default function Home() { const [data, setData] = useState(null); useEffect(() => { fetch("https://api.we ...
I'm in the process of updating an older component that currently uses: shouldComponentUpdate() to prevent unnecessary state re-computation componentWillUpdate() to perform the re-computation and render only if 1 is true In the documentation, it sta ...
I utilize [email protected]. Whenever I attempt to load an external css or javascript file in my index.html, Parcel consistently fails to build with the following error: Build failed. @parcel/core: Failed to resolve './css/main.css' from & ...
I attempted to move the footer down using the provided code below, but it doesn't seem to be working. I even went ahead and removed all standard text from the CSS file to eliminate any potential issues. It should normally shift downward with <div ...
Hey there, I just uploaded a video from YouTube onto my website and noticed that the footer, which is fixed, is being overlapped by the video. Is there any way to resolve this issue? Perhaps some CSS tricks or hacks? Any assistance would be highly appreci ...
While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...
I am currently developing a software program that needs to automatically submit a form on a webpage by "clicking" on a button: <button class="form" type="submit">Send</button> Based on my limited knowledge, I understand that in order to submi ...
Recently, I have been working on developing a filter function using ajax and PHP. Although I am still quite new to ajax, I was able to create an HTML input that looks like this: <form> <input type="text" placeholder="Search" ...
<div id="header"> <div class="cont"> <div id="banner"> <div id="nav"> <ul> <li><a href="index.htm">home</a></li> <li><a href="work.html">Works»</a> <ul> ...