How can I solve the issue of the React Material UI Snackbar consistently appearing at the bottom?

Hello, I am in the process of creating a snackbar using material ui. The React version is 0.14, while the Material-ui version is 0.15.0.

Since I couldn't find anything suitable for this particular version of React, I opted to use material-ui. The snackbar works fine but it only opens at the bottom of the screen. Is there a way I can change its position? For instance, how can I make it appear at the top right?

Here's my code:

import Snackbar from 'material-ui/Snackbar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

this.state = {
      open: false,
    };

 handleTouchTap = () => {
    this.setState({
      open: true,
    });
  };

  handleRequestClose = () => {
    this.setState({
      open: false,
    });
  };


 <div>
        <button
          onClick={this.handleTouchTap}> 
            SHOW NOTIFICATION
       <button>

        <Snackbar
          open={this.state.open}
          message="Event added to your calendar"
          autoHideDuration={4000}
          onRequestClose={this.handleRequestClose}
        />
      </div>

View the image here: [Notification image1

Answer №1

Make sure to include the anchorOrigin property in order to change the position:

<Snackbar
  ...
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue TS2307: Module 'fs' or its type declarations cannot be located

I'm having trouble importing the fs module into my TypeScript component using import * as fs from 'fs'; I need it to use the writeFile method, as I want to extract data from an HTML form and write it to a JSON file. However, I am getting t ...

How can I retrieve text adjacent to a checked input checkbox by using JQuery (or JavaScript)?

Here is the HTML block under consideration: <div class"radioGroup"> <input type="radio" value="0"> This option is NOT selected <input type="radio" value="1" checked = "checked" > This option is selected <inpu ...

Is there a way to eliminate the feature that rearranges characters in reverse order?

Is there a way to modify this code to only replace vowels with "er" instead of reversing the order of characters? I'm hoping to remove the function that reverses the character order. If you want to take a look at the code, it's available on Past ...

It is not possible to declare a constant in React

I'm struggling with defining const in React. Whenever I try typing accounts in the console command after starting the web browser, I encounter an error. >accounts VM768:1 Uncaught ReferenceError: accounts is not defined at <anonymous>:1 ...

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

Attempting to utilize the Put method with Ajax, but the script does not seem to be executing

Currently, I am working on implementing the Put method using Ajax: <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></ ...

Unlocking JSON Keys Using Dashes

When working with JSON objects, we typically access elements using dot notation. For example, var obj = {"key": "value"}; var val = obj.key;. However, what if the key contains hyphens, like in this case: var obj = {"key-with-hyphens": "value"};? Do we ne ...

Looking for a specific phrase in the data entered by the user

I am dealing with data in ckeditor that looks like this: <p>test 1</p> <p>test 2</p> <p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICw ...

The AngularJS directive fails to display any content within its element children

Trying to retrieve the innerHTML of the selected node in options The <i class="before"></i> tag should display text from either the selected or the first option when the page loads, within the same group. However, only dropdowns with hardcoded ...

Steps to duplicate a Select input and attach it to a div using Jquery

Recently, I was working on a Select input with the name "item" as an example. <select name="item"> <option value="1">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> <opt ...

Having trouble with getting the footer to display correctly on mobile when dealing with a scrollable section within another scrollable section in React and CSS

Looking for some assistance with a coding issue I've encountered. I have created a section on my website where I map components, which includes a vertical scroll. Outside of this section, there are other components such as a map, navbar, footer, etc. ...

Utilizing Bootstrap 4 columns to control the height of a separate column

Is there a way in CSS to make one column in a bootstrap grid determine the height of another column within the same row? For example, consider the following scenario: <div class="row"> <div class="col col-sm-6" id="column1"> <!-- an e ...

All fields in the form are showing the same error message during validation

This is the HTML code: The form below consists of two fields, firstname and lastname. Validation Form <form action="" method="post"> Firstname : <input type="text" placeholder="first name" class="fname" name="fname" /> <span class= ...

extract part of a JavaScript date by utilizing substring

When attempting to populate a text box with a date in the format Wed Sep 14 2016 00:00:00 GMT+0400, I encountered an issue. My goal was to extract the date in the format Sep 14 2016 using the substring method. I implemented the code below, but unfortunate ...

Eliminate the mystery overflow in your CSS styling

My website is experiencing overflow on the x axis, even though all vw/width properties are set to 100. I suspect that the .logout element may be causing this issue, but I'm not sure what exactly needs to be modified to resolve it. Any assistance would ...

PHP and MySQL pagination made easy with CSS styling

I am attempting to create a basic php pagination system, or more specifically, a css pagination system with php/mysql. Retrieving and storing data from the database while($row = $result->fetch_assoc()) { $id[]=$row["id"]; $name[]=$row ...

Learn how to change the input source in Ratchet's chat app to come from a text box on the webpage instead of the console

I followed the guidelines on to create a chat app. However, I now want to input data from a text box instead of using conn.send() in the console. How can I achieve this using php? I was successful in redirecting the sent message to an html element like ...

Is it possible to achieve a capsule shape using border-radius without specifying a fixed width or height?

Can a capsule shape be created using border-radius without specifying a width or height? I am looking to have the left and right sides of the capsule fully rounded while keeping the horizontal length straight. Setting the radius to 50% does not achieve th ...

Django redirects to an alternative template instead of the default one

After renaming my login.html file to login1.html instead of deleting it, I have been using Django-registration and Django-registration-views from Github. However, despite this change, Django continues to call registration/login1.html. Is there a way for me ...

What is the best way to access a specific item within a Json object in a React component?

I am facing an issue where I receive a JSON object from my express backend in my react application, but I am unable to access the username property. I need to retrieve the value stored in the username field. After storing the JSON object in my react state ...