Establish a set distance between list items

I recently incorporated a Material UI list component into my project.

Take a look at the code snippet I used:

<List>
    <ListItem button>
      <ListItemText
        disableTypography
        primary={<Typography>Hello</Typography>}
      />
      <p>John</p>
      <DraftsIcon />
    </ListItem>
  </List>

Here's the screenshot of how it looks: https://i.sstatic.net/UJckZ.png

I'm facing an issue with setting a fixed distance between "Hello" and "John". How can I accomplish this and avoid the positioning problem shown in the screenshot below:

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

cssreactjsmaterial-uilistitem

Answer №1

// to make the button minWidth

     <List>
        <ListItem button>
          <ListItemText
            style={{minWidth:"50px" }}
            disableTypography
            primary={<Typography>Hello</Typography>}
          />
          <p>John</p>
          <DraftsIcon />
        </ListItem>
      </List>

Another way to achieve the same is:

import React from 'react';
import Box from '@material-ui/core/Box';
import { IconButton, Typography } from '@material-ui/core';
import DraftsIcon from "@material-ui/icons/Drafts";

export default function FlexGrow() {
  return (
      <Box display="flex" p={1} >
        <Box p={1} flexGrow={1} >
        <Typography variant="button" display="block" gutterBottom>
          Hello
        </Typography>
        </Box>
        <Box p={1} >
        <Typography variant="button" display="block" gutterBottom>
          John
        </Typography>
        </Box>
      <IconButton color="inherit" style={{marginTop :"-10px"}}>
        <DraftsIcon/>
        </IconButton>
      </Box>
  );
}

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

React Redux -> What causes the TypeError: Cannot read property 'item' of undefined?

Recently, I've been working on incorporating objects into my Redux store but it seems like something is off. Initially, I define my objects in the following manner: const products = [ { name: 'Blue Dress', price: 540, ...

reactjsredux

React is unable to assign a class field beyond the scope of axios

class App extends React.Component { app: Application; ... componentDidMound() { axios.get(…).then(res => { this.app.currentUser = res.data.data; // setting value inside lambda function. console.log(this.app.currentUser); // ...

javascriptreactjstypescriptaxios

The website functions properly with Live Server, but encounters issues when launched from the Files directory

After testing multiple browsers, the site consistently works fine with Live Server. However, when accessed through Firefox or Chrome, my style.css fails to load completely. On Edge, an error message indicates that the file is missing. Below are snippets of ...

htmlcssfilebootstrap-5liveserver

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

htmlcssbootstrap-5

Tips for utilizing React to communicate with the Firebase REST API via a POST request

I am currently attempting to log in using OAuth credentials, which requires sending an HTTP POST request to the Auth verifyAssertion endpoint. Can someone guide me on how to do this correctly? The Firebase documentation I am following uses cURL for their e ...

reactjsfirebaserestexpressfirebase-authentication

Tips for utilizing bootstrap.css to position a web design form in the center of the page and place the copyright at the bottom

I have spent several hours trying to figure out how to achieve this, but still haven't found the solution. I have a form that I believe doesn't look very good: https://i.sstatic.net/t1MRd.png So, I attempted to center the form on the page and ...

jqueryhtmlcsstwitter-bootstrap

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

Invoke the REST API endpoint when the tab is in focus

I'm currently utilizing Tabs for content switching on my website. Each Tab is linked to different content that is retrieved from a REST API. Is there a method to trigger the REST API endpoint only when a Tab is in an "active" state instead of during ...

reactjstabsmaterial-ui

Increase the counter by one and reset all other counters to zero

I have developed a counter feature as a component and incorporated it four times within the main parent element. Here's an excerpt from Counter component function NoTravellers({ label, chooseTraveller }) { const [count, setCount] = useState(0); c ...

reactjsreact-hooks

flickering image when shared using react-navigation-fluid-transitions

Currently, I am in the process of mastering the art of creating stunning animations using react native. However, I am facing some difficulties while working with the react-native-fluid-transitions library. My issue arises when using shared elements with i ...

iosreactjsreact-nativereact-navigationshared-element-transition

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

javascriptjqueryhtmlcss

My navbar has an empty space that I want to fill. I aim to move the search bar all the way to the right - any suggestions on

https://i.sstatic.net/SvTiG.jpg This is the code for my navbar customization: <nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav"> <div class="container"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Chrome is able to interpret Behat CSS selectors, whereas Firefox struggles with them

Recently I began working with Behat and Selenium for website test automation. One issue I've encountered is that some CSS selectors work in Chrome but not in Firefox. For instance, in my Behat code: Then I press ".topmember-resultList .resultListIte ...

cssseleniumfirefoxbehat

What is the best method for using CSS/HTML to showcase text at a height of 2mm consistently across various devices with varying screen resolutions and dimensions?

Designing a basic webpage to showcase the text "Hello, World!": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta charset="utf-8"> </head> <body> <p>Hello, Wor ...

htmlcss

IE causing Ul LI Menu to not display as Block

I'm encountering an issue with my menu. It displays correctly in Firefox and Chrome, but in IE8 it appears as a vertical list instead of a horizontal menu. I have included a doctype and I am linking to the HTML5 JavaScript via Google, so I'm not ...

htmlcssinternet-explorerhtml-lists

Enhancing websites with CSS3 and VueJS for fluid and captivating background gradients transitions

After implementing a logic in the application, the gradient is now changing dynamically. <template> <div :style="`background-image: ${backgroundImage}`" class="background"> <snackbar /> <nuxt /> <default-footer /&g ...

javascriptcssvue.jscss-transitionsnuxt.js

Pressing the button in the navigation bar results in an expansion of the navbar

Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...

htmlcssbootstrap-4

Decrease the size of the "subscribe" button

Our "subscribe" button is currently displayed like this: https://i.sstatic.net/toiOb.png However, we are looking to reduce the extra width and have it appear more like this: https://i.sstatic.net/NaaYJ.png We are using the same code for both versions: ...

htmlcss

The image is missing from the frontend despite being retrieved from the MongoDB database

Hello, I am currently working on my FYP and as a beginner in React JS and Node JS, I have managed to store an image in a MongoDB database. When uploading the image, it is stored in a local directory named "uploads" with the corresponding name saved in the ...

node.jsreactjsexpressmulter

Tips for generating a subprocess with exec within a TypeScript Class

I am looking to automate the process of creating MRs in GitLab. When a button is clicked in my React/Typescript UI, I want to trigger command-line code execution within my Typescript class to clone a repository. However, every time I attempt to use exec, I ...

reactjstypescriptgitsubprocessexec