Having difficulty formatting a div using HTML/CSS in a React application

As I embark on my journey to learn HTML/CSS, I am experimenting with different examples. Currently, I am struggling to create a div that resembles what I envision due to the content being 'glued' together.

I have attempted various methods, but none of them come close to achieving the desired outcome. Given my lack of experience in HTML/CSS, this task has proven challenging.

If you were to execute the code below, you would observe that it is far from ideal. The text lacks spacing, vertical alignment is off, and centralizing the size within the div eludes me.

Below is the snippet of my code:

<div style={{ background: '#e1e1e1', marginBottom: '5px' }}>
  <span id="delete" style={{ float: 'right', display: 'inline-block', padding: '2px 5px' }}>
    x
  </span>
  <i className="icon ion-md-checkmark-circle" />
  TestImg1.PNG
  3.98KB
</div>

I would greatly appreciate any guidance on how to achieve this design along with an explanation so that I can enhance my learning process. Thank you and best regards!

Many thanks!

htmlcssreactjs

Answer №1

You may want to consider utilizing bootstrap's grid layout system.

<div class="container">
  <div class="row row-grey align-items-center">
    <div class="col-2">
    <i class="material-icons icon-green">
        check_circle
    </i>
    </div>
    <div class="col-3">
      File.png
    </div>
    <div class="col-6">
      52kb
    </div>
    <div class="col-1">
      x
    </div>
  </div>  
</div>

Check out the link to the fiddle for more information.

Answer №2

If you want to easily manage the layout and sequence of your elements, consider using Flexbox. Simply apply display: flex to the parent <div>. Determine the order of your elements by utilizing the ordering property - with one indicating the first element and three representing the last. To shift the delete element to the end of the parent <div>, add margin-left: auto; to it. Take a look at how the code is displayed in action here: Codepen example

<div style={{ display: 'flex', background: '#e1e1e1', marginBottom: '5px', padding: '2px 5px' }}>
    <span id="delete" style={{ order: '3', marginLeft: 'auto' }}>
        x
    </span>
    <i className="icon ion-md-checkmark-circle" style={{ order: '1' }} />
    <span style={{ order: '2', marginRight: '10px' }}>
        TestImg1.PNG 3.98KB
    </span>
</div>

Answer №3

Another option worth exploring is Flex.

<div style={{ background: '#e1e1e1', marginBottom: '5px', display:flex }}>
  <I style={{flex: 0}} className="icon ion-md-checkmark-circle" />
  <span style={{flex: 1, marginLeft: 8px}}>
    TestImg1.PNG
  </span>
  <span style={{flex: 1}}>
    3.98KB
  </span>
  <span id="delete" style={{ flex: 0, padding: '2px 5px' }}>
    x
  </span>
</div>

The CSS property display: flex is used in the container.

When flex: 1 is applied to text elements, they stretch with a ratio of 1.

Conversely, flex: 0 on icons prevents stretching.

To delve deeper into this topic, check out this resource

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

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

javascripthtmljquery

Unable to locate the value property of a null object

I'm currently working on creating a Shopping Cart using HTML, CSS, JavaScript, and JQuery. The idea is that when you click "Add to Cart" for the orange item, most of the HTML elements will disappear, leaving only the table displaying the Shopping Cart ...

javascriptjqueryhtmlcss

Is there a way to change the route in nextjs without causing a refresh?

As I navigate through routes such as: /welcome/article/article-slug-1 /welcome/article/article-slug-2 /welcome/article/article-slug-3 The dynamic element is the article-slug, which functions as a query parameter. The structure of my pages is as follows: ...

reactjsnext.js

Setting the default option in an Autocomplete component using Material UI in React JS

I am currently working with autocomplete input using react material ui component. One specific challenge I am facing is setting a default selected value when a user enters edit mode for this input field. Although I can select the option using getOptionSe ...

javascriptarraysreactjsobjectmaterial-ui

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

htmlcssweb-applicationsmedia-queries

What methods can be utilized to create a versatile ratings widget using LESS instead of traditional CSS?

Recently, I stumbled upon a versatile one-image rating widget created with SASS by the team at AirBnB. I am interested in replicating something similar using LESS. While I could manually write out the CSS, I prefer to generate it dynamically with LESS. My ...

htmlcssless

Prevent redirection when submitting and show an error message instead

I implemented a login system where, upon entering the correct username and password, a token is stored in local storage. If there's an error with the credentials, an "Login Unsuccessful" message is displayed. Everything was functioning correctly until ...

javascriptreactjstypescripthttp-redirectreact-router

React Native text input component malfunctioning in a particular area on Android device

UPDATED. Hey everyone, based on your advice I'm now focusing on one question at a time. Although I managed to fix some minor issues, there's still a strange bug that I can't seem to figure out. The problem arises when trying to click on th ...

androidreactjsdebuggingreact-native

Issue with the parent element size when containing an image smaller than 100% width

This is the default appearance with all images set to 100% width: image description here These images must maintain their aspect ratio, so I can only use percentages for sizing. When the image width is set to 60%, it looks like this: image description ...

htmlcss

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

phpcss

How can we eliminate excess white space within JSX class names?

Currently utilizing React and Tailwind within WebStorm. Is there a way to set up ESLint or Prettier to automatically eliminate the excess white space between 'text-3xl' and 'font-bold' in the JSX classname string below? <h1 className ...

reactjstailwind-csseslintwebstormprettier

Does anyone have a solution for avoiding the need to generate an HTML character code for displaying Time?

Is there a workaround for generating an HTML character code that resembles Time? Perhaps manipulating another character code to create a similar effect, or utilizing a font with symbols suitable for representing time. ...

html

Utilizing an arrow function enclosed within curly brackets to manage React context

During a React context tutorial, I came across this code snippet: <MyContext.Consumer> {value => /* render something based on the context value */} </MyContext.Consumer> This part, value => /* render something based on the context valu ...

reactjsarrow-functionsreact-context

Unexpected result when retrieving data from Material UI TableContext: the return value is undefined

After trying to utilize the TableContext inside a subcomponent to determine the current size, I'm running into issues where I only receive undefined: const Bar = () => { const tableContext = React.useContext(TableContext) const ...

reactjsmaterial-ui

MUI Error: The `styles` argument you've supplied is not valid. You have included a function without a theme in the current context

I encountered an error while attempting to add a breakpoint in the navigation bar. Despite looking at similar questions, I am unable to resolve this issue. Navbar.js import { AppBar, Toolbar, Typography } from '@mui/material'; import { makeSty ...

reactjsmaterial-ui

What is the reason for the ID "home-ad" not functioning properly in Firefox?

While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code wor ...

htmlcssfirefox

label positioned above every button in the button group

I'm trying to organize buttons using btn-toolbar (not using btn-group because I want different buttons) and also want to add a label at the top of each button. However, I am having trouble achieving my desired result. Here is the snippet of code I hav ...

htmlcsstwitter-bootstrap

Utilizing React Redux Loading Bar: Error - Unable to access property 'default' of an undefined object

UPDATE After updating and installing the library with its newer package, I encountered the following error: TypeError: Cannot read property 'default' of undefined Function.mapStateToProps [as mapToProps] node_modules/react-redux-loading-bar/buil ...

javascriptreactjsredux

Revamping nearly indistinguishable elements within Formik React

Having two identical components with a few differences can lead to repetitive code and boilerplate. I'm unsure of the best way to refactor this so that I only need to provide a configuration. LoginPage.js import React from 'react&apo ...

reactjsrefactoringhigher-order-componentsformik

Redeeming tokens from different origins is only allowed for clients classified as the 'Single-Page Application' type

I've encountered an issue while trying to obtain an access token from the MS Graph API within a Next.js application. Everything works perfectly in Postman, but when attempting it in my app, I receive the error message: "AADSTS9002326: Cross-origin tok ...

reactjsapinext.jsmicrosoft-graph-api