I am unable to incorporate added height into the component

In my current project using react.js, material-ui, and sass, I had the task of creating a ChatBit component. After writing it, here is the code:

customComponent.js file.

    // @flow
    import * as React from 'react';
    import { useState } from 'react';
    import { Avatar} from "@material-ui/core";
    import useStyle from './styles';

    type Props = {
        children: React.Node;
    }

    const AbsoluteBox = ({
        children
    }: Props) => {
        const [toggled, setToggled] = useState(false);
        const styles = useStyle();
        const handleClick = () => {
            setToggled(!toggled);
        };
        const contentStyle = `container__content_${toggled ? 'show': 'hide'}`;
        return (
            <div className={styles.container__bottomRight}>
                <div className={styles.container__header} onClick={handleClick}>
                    <Avatar
                        variant="rounded"
                        src="/assets/images/rebots.svg"
                className={styles.container__header__avatar}
                    />
                </div>
                <div
                    className={styles[contentStyle]}
                >
                    {children}
                </div>
            </div>
        );
    };

    export default AbsoluteBox;

styles.js file.

    import { makeStyles } from '@material-ui/core';

    export default makeStyles({
        container__bottomRight: {
            position: 'fixed',
            right: 0,
            bottom: 0,
            marginRight: 12,
            width: 300,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
            boxShadow: '0px 0px 13px 0px rgba(0,0,0,0.51)'
        },
        container__header: {
            paddingLeft: 10,
            paddingTop: 4,
            paddingBottom: 6,
            backgroundColor: '#D7E0FC',
            height: 38,
            borderTopLeftRadius: 8,
            borderTopRightRadius: 8,
            cursor: 'pointer'
        },
        container__header__avatar: {
            height: 40
        },
        container__content_hide: {
            transition: 'height 400ms 400ms, opacity 400ms 0ms',
            opacity: 0.0,
            height: 0,
        },
        container__content_show: {
            height: 400,
            opacity: 1.0,
            boxSizing: 'border-box',
            transition: 'height 400ms 0ms, opacity 400ms 400ms',
        },
    });

Then, to implement the Component:

    <AbsoluteBox>
      <h1>Hello World</h1>
    </AbsoluteBox>

The issue I encountered is that there is unwanted white space when trying to close the box.

https://i.sstatic.net/8av5a.png

https://i.sstatic.net/tB30u.png

Answer №1

Inside the container, there is a <h1> tag with margin that is causing some problems (even when the height of the container is set to 0).

To resolve this issue, adjust the margin-top of the h1 element to 0 or utilize different elements styled appropriately.

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

Ways to address the alignment of list items within a drawer component using React

A couple of days back, I posted a query right here: How can I expand only one ListItem using a single method in React? I received an incomplete response which I accepted (although it seemed to work initially). Admittedly, my question may have been slight ...

Dynamic content alongside a stationary sidebar that adjusts in width

Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources. The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length. ...

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

Currently, I am in the process of developing a website using AngularJS and ASP.NET, incorporating Angular Material. However, I encountered an issue where scrolling on the page causes the top navigation to move up the body or essentially "disappear" when cl ...

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

After setting up an authentication system in express using firebase auth, I established an endpoint in my express server: app.post('/users/login', (req, res) => { console.log('logging in...'); firebase.auth().signInWithEmail ...

The website link cannot be seen on Internet Explorer 8, however it is visible on other browsers like Firefox and Chrome

Please verify the following link: The link "Return to login page" is displayed correctly on Firefox, Chrome, etc., but it appears higher on IE8. How can this be fixed? To resolve this issue, you can adjust the CSS for the 'lost_password' div as ...

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

What is the best way to manipulate the size and orientation of an image upon hovering over

I'm struggling to figure out how to simultaneously rotate and scale a .png file when the user hovers over it. Currently, it only scales when I hover on the picture. I understand that the scale property overwrites the first transform but I can't s ...

Controlling MYSQL data is not possible

When I retrieve data from the database, everything is functioning correctly, but the data flow seems uncontrolled. Here is a snippet of my code... <?php session_start(); include 'conn.php'; include '../includes/layouts/header.php'; ...

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

Creating a diagonal effect on a table using jQuery

I am interested in adding a diagonal effect to my table. For instance, if I have a 5x5 table, I want to highlight the first row and set the background color of the corresponding column in that row to red. The same should be done for each subsequent row. ...

Can someone help me identify the issue with my JavaScript code?

Recently, I attempted to transfer data from JavaScript to HTML using Angular. Here is the code snippet: phonecatControllers.controller('start', ['$scope', function($scope){ $scope.lloadd=true; console.log('data - '+$ ...

Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...

Preserve the existing value and then check it against the updated value of a variable within JavaScript

I utilized an API that supplies me with information in JSON format, retrieved the price of a specific currency, and presented it on a screen using JavaScript. I encapsulated this process within a function that dynamically updates the information at set int ...

Guide to integrating the useFormik hook with async await in the onSubmit function

I'm struggling to figure out how to incorporate async-await with the useFormik hooks in the onSubmit event. My goal is to use the axios library within the onSubmit event, but I can't seem to find clear instruction on how to implement async-await ...

Accessing information from Cookies within Jest tests using js-cookie

Can someone please guide me on how to test the function Cookies.get using Jest testing? I have a util.js file where I am calling the following code: const fullObjectStr = Cookies.get(cookieName); Now, I am looking to write tests for this using jest. Any ...

Implementing Jquery to Repurpose a Function Numerous Times Using a Single Dynamic Value

Important: I have provided a functional example of the page on my website, currently only functioning for the DayZ section. Check it out here Update: Below is the HTML code for the redditHeader click event <div class="redditHeader grey3"> & ...

Incorporating the JQuery plugin Lightbox_me into a Ruby on Rails application

Greetings! I am currently attempting to incorporate a popup window using the Lightbox_me plugin in my Ruby On Rails application. After downloading jquery.lightbox_me.js and placing it in the app/assets/javascripts directory, I added //= require jquery.lig ...

Replace the hyperlink with plain text using JQuery

Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...

Error: inability to execute performanceMeasurement.startMeasurement due to its absence in the function definition

An error occurred when attempting to login using @azure/msal-react in Next 13. Upon checking the error log, it was found that the error originated from the core library @azure/msal-react. Even after trying with a login popup, the error persisted. In my co ...