What is the best way to make the top of my component stay fixed in place?

Is there a way to make my 'MyTitle' component stay fixed at the top, even when the 'MyForm' component grows vertically? Currently, as the 'MyForm' component expands, the MyTitle component moves up and eventually disappears. How can I fix this issue? Would using CSS or antd solve this problem?

<Space direction="vertical" size={100}>
          <MyTitle  />
          <Card className="card">
             <MyForm />
          </Card>
        </Space>

Here are some visual representations of the issue:

-----------------------------
         my title
-----------------------------


           card

-----------------------------

As the card grows, the title disappears:

                             ^
          my title           ^
-----------------------------


          card










-----------------------------

Answer №1

consider using position: fixed with a set width for better results

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

It's not possible to add additional options to the select input in a react

Hi there! I'm currently facing an issue while trying to retrieve a list of options from the backend, map them to another list of options, and add them to a main list. Unfortunately, my attempts have not been successful. Could anyone offer some advice ...

Difficulty in centering two equal-sized columns in a Bootstrap 3 row with an offset

Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/ I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row. The desired effect is to center both of these columns inside the .row, ensuring ...

Is it necessary to save the user's sign-in status in Local Storage in order to render the component (using React, Next.js, and Firebase Authentication)?

(Implementing Google Signin with Firebase and React(Next)) When a user signs in, the state is set to true. The home component and login component are rendered in index.js based on the state value. Initially, I stored this state in local storage, but I rea ...

Update my React shopping cart with fresh items

I am currently dealing with an issue in my online food ordering system. Specifically, when I click on the add button to order an item, it updates the existing item in the cart instead of appending the new one as the next item. Highlighted below is a cruci ...

Having trouble creating space between two aligned elements?

I have created two buttons in the code snippet below with the same width, but I'm struggling to add a gap between them. This issue persists in the mediaquery version for mobile as well. How can I solve this? .flex-container { display: flex; justi ...

Steps to utilize jQuery Masonry Plugin for organizing images

Struggling to put together a straightforward image gallery that can accommodate images of different sizes, I stumbled upon masonry in my quest for a plugin that could help with that. After attempting to create a prototype of this idea using a masonry empt ...

Guide on adding or removing a class from all <li> elements except the final one

I am working with a set of list items (<li>) inside an unordered list (<ul>). I have created a JavaScript function that adds the 'active' class to the clicked item and removes it from its siblings. However, I only want this functional ...

Is the div not visible? Only prepend then

Looking to prepend a div only when the specified conditions are met. $(".loginForm").submit(function() { var username = $("input.username").val(); var password = $("input.password").val(); var errorvisible = $("body").has(".alert.error ...

DerivedStateFromProps function does not execute

Incorporating React version 16.3.1 along with next.js, I have embedded the method getDerivedStateFromProps within a class that extends PureComponent. Here is an excerpt of the code: Header.js import { PureComponent } from 'react' ... expor ...

Unable to establish defaultValue for ToggleButtonGroup

Whenever I try to populate my ToggleButtonRadio component with data from the componentWillReceiveProps(nextProps) method, the defaultValue seems to show up as undefined and then fails to update when new data is received. Everything works fine if the data c ...

Is it possible to trigger the onNewRequest property when the onBlur event is fired for AutoComplete in Material-UI?

Currently, I am utilizing Material-UI and making use of the onNewRequest property in the AutoComplete field. However, the onNewRequest only triggers when Enter is pressed or when a value is selected. I am interested in calling the onNewRequest even when ...

The layout of my Material-UI became disorganized once the project was

I recently completed a website using node.js, material-ui, and create-react-app. During the development build process with yarn start, everything looks like this on my local server: https://i.stack.imgur.com/5JvcC.png However, after running the producti ...

Error: module 'next/react' not found

Recently delving into next.js, I encountered an error after creating a project with npx create-next-app. Oddly enough, the app still runs despite this issue. { "resource": "/E:/codes/news-website/news-website/pages/index.js", ...

Creating and managing global context with useReducer in TypeScript and React

One issue that I am facing is with the route containing a login and logout button, where the browser error states 'Property 'dispatch' does not exist on type '{}'. (home.tsx) import React, { useContext, useEffect, useRef, use ...

Instructions on dynamically positioning a collection of div elements at the center of a webpage container

I am looking to create a set of divs that are centered on the page and adjust in size according to the length of the username. .Container1 { display: table; width: 100%; padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: bor ...

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

Position the text to the right of the div or image and allow

My attempt to align the lorem ipsum sample text next to the image and div container by setting the float to right has not been successful. The text still remains below the image. Click here for visual reference Appreciate any help in advance. #outer { ...

Rendering props conditionally in React

I am currently facing an issue with two different states retrieved from API calls: 'movieList' and 'search'. Both of them contain arrays of movies. The 'movieList' state is automatically rendered on the page to display popular ...

Toggle the visibility of a dropdown menu based on the checkbox being checked or unchecked

One challenge I am facing involves displaying and hiding DropDown/Select fields based on the state of a Checkbox. When the checkbox is checked, the Dropdown should be visible, and when unchecked, it should hide. Below is the code snippet for this component ...

The progress bar in vis.js is displaying inaccurate values

I am currently facing an issue with implementing the progress bar. The problem is that the progress bar always shows around 55% regardless of the value being set. var items = new vis.DataSet([ {id: 0, group: 0, content: 'item 0',value: 0.0, st ...