What is the best way to ensure proper alignment of elements in a React application?

Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To achieve this layout, I am utilizing the Row and Col components from antd. However, I seem to be encountering an issue where the fields are overlapping each other. Below is my implementation:

<Row className="mt-2" gutter={24}>
  <Col sm={4} >
    <span>Upload</span>
  </Col>
  <Col sm={7}>
    <span>File Name</span>
  </Col>
  <Col sm={5}>
    <span>File Path</span>
  </Col>
  </Row>
  <Row className="mt-2" gutter={24}>
    <Col sm={4}>
      <Upload maxCount={1} showUploadList={false} beforeUpload={() => false} >
        <Button type='primary'>Upload</Button>
      </Upload>
    </Col>
    <Col sm={7}>
      <input style={{height: "40px", width: "400px"}} disabled={true}></input>
    </Col>
    <Col sm={5}>
      <input style={{height: "40px", width: "300px"}} ></input>
      </Col>
</Row>

I have provided a visual reference for how the spacing should be laid out. Despite my efforts, the alignment of the fields does not meet my expectations when running the code. I suspect that the issue lies within the 'sm' field, but I am uncertain. Can you confirm if the Col component will properly handle the spacing between fields, especially since I am not utilizing the full width of the screen? https://i.sstatic.net/2BOUz.png

Answer №1

Utilizing the Antd Grid System with a total of 24 units requires precise splitting...

Check out the code on codesandbox -> https://codesandbox.io/s/antd-reproduction-template-forked-pmxh30?file=/index.js

 <Row className="mt-2" gutter={24}>
  <Col xl={4} lg={4} md={4} sm={24} xs={24} >
    <p>Upload</p>
    <Upload className="mt-2" maxCount={1} showUploadList={false} beforeUpload={() => 
     false} >
        <Button type='primary'>Upload</Button>
      </Upload>
  </Col>
  <Col xl={12} lg={12} md={12} sm={24} xs={24}>
    <p>File Name</p>
    <input className="mt-2" style={{height: "40px", width: "400px"}} 
    disabled={true}></input>
  </Col>
  <Col xl={8} lg={8} md={8} sm={24} xs={24}>
    <p>File Path</p>
   <input className="mt-2" style={{height: "40px", width: "300px"}} > 
   </input>
  </Col> 
</Row>

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

Transforming an uncontrolled Autocomplete component into a controlled one

Why am I receiving the error message "A component is changing an uncontrolled Autocomplete to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Autocomplete element ...

Using scripted <svg> with <defs> and attempting to reference it via JavaScript results in failure

My goal is to dynamically generate svg path elements in html using JavaScript. I would like to place these paths within a <defs> element so that they can be reused later in <use> xlink:href elements. However, after creating the paths (by pr ...

The WordPress issue of a background image not displaying properly when using both a linear gradient and an image

Code snippet: style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);" Within the div, only the linear gradient is visible. When I switch the order ...

Download a complete website using PHP or HTML and save it for offline access

Is there a way to create a website with a textbox and save button, where entering a link saves the entire website like the 'save page' feature in Google Chrome? Can this be done using PHP or HTML? And is it possible to zip the site before downloa ...

Utilizing PHP and AJAX to Extract Information from a MySQL Database

My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...

Showing the heading again after a new page starts

Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...

How to remove checkbox border using HTML, JavaScript, and CSS

Is it possible to remove the square border from a checkbox in HTML? ...

Wordpress team exhibition

Does anyone know how to create a Team showcase slider in Wordpress? I have been using slick slider, but I'm looking for a way to add team members easily through a plugin rather than manually. I found an image of what I want it to look like. Can any ...

What is the best way to conceal the broken image icon using PHP?

UPLOAD PICTURES IN DATABASE: if (!isset($_FILES['gambarid']['tmp_name'])) { echo ""; }else{ $rand5=rand(); $image_name5= addslashes($_FILES['gambarid']['name']); $fileext5=explode('.&ap ...

Is there a way for me to make this Select update when onChange occurs?

I am facing an issue with a react-select input that is supposed to display country options from a JSON file and submit the selected value. Currently, when a selection is made, the field does not populate with the selection visually, but it still sends the ...

Modifying website elements with JavaScript

Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...

CSS file selector for Reactstrap component

What is my goal? I noticed a gap between my jumbotron and footer that I want to remove. Initially, I was able to achieve this by setting the margin-bottom to 0px, but it required passing an ID to the Jumbotron element. Now, my objective is to accomplish t ...

Ensuring the bottom border of an element extends to the edge of the screen when utilizing a 960 grid in HTML/CSS

I am currently working on creating a website layout using the 960 grid system developed by Nathansmith. I am facing an issue in extending the bottom border of an element to reach till the end of the screen while keeping the element inside a container div. ...

Highlight a pair of words in a phrase using jquery technology

Only one word in my code is highlighted $(document).ready(function() { let firstword = 'web'; let secondword = 'js'; $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword ...

Adjust the size and position of the text input field

I'm struggling to find a way to both resize and move the box without one action interfering with the other. Whenever I attempt to change the size of the box, it triggers the move event at the same time. Clicking on the box should make it resizable, bu ...

What is preventing module C from receiving the socket io event "hi"?

How can I call a different module for each socket path? Here is the updated server code: require('dotenv-flow').config(); const express = require('express'); const app = express(); const http =require('http'); const httpSer ...

Contents of the container are not displayed in a single line

What could be causing the first element not to align with the other elements in the container? I'm having trouble figuring out why this is happening. The code snippet seems to work, but when I implement it on the webpage, the alignment issue arises. W ...

Getting rid of the standard border around images

I've been searching for a while now, but I can't seem to find a solution to fix this specific issue. On a webpage, I have an image (<img...>) that, when it loads, shows a 1px solid white (or very light grey) outline or border on the outermo ...

CSS absolute positioning not functioning as expected

I am experiencing an issue with positioning child elements within a parent element. The parent element is relatively positioned, while the two child elements are absolutely positioned to be in the top left and top right corners. However, despite having exp ...

How to customize the size of Font Icons in ReactJS Material UI

Can the font icon be adjusted to a smaller size? I attempted using the code provided, however it did not have any effect. <FontIcon className='fa fa-quote-left' style={{ fontSize: '50px' }} /> ...