Tips for ensuring the position of buttons remains consistent no matter the size of the image

I am facing an issue with maintaining the button location when an image is added. My goal is to ensure that the button's position remains horizontal consistently.

Front-end: React
CSS framework: semantic-ui-react

  render() {
    return (
      <Container text style={{marginTop: '3em'}}>
        <Header as="h1">{this.state.article.title}</Header>
        <this.Paragraph />
        {(this.state.article.imageNames || []).map(function(articleData, i) {
          return (
            <img
              src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
                articleData.name
              }`}
              alt="new"
            />
          );
        })}
        {/* TODO fix button location when image exists */}
        <Button color="green" as="a" href="/">
          <Icon name="arrow left" />
          Back to Home
        </Button>
        {this.renderRedirect()}
        <Button floated="right" onClick={this.deleteArticle}>
          <Icon name="trash" />
          Delete this Article
        </Button>
      </Container>
    );
  }

The complete source code is available at:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx

At a specific image size, the button location appears like this:
https://i.sstatic.net/hvr4f.png

My objective is to have the button location consistently horizontal, as shown in this example:
https://i.sstatic.net/Edtvp.png

Although I expect the button location to always be horizontal, it is not always aligned according to the image size in reality.

Answer №1

According to @Arup's suggestion, the solution to this problem lies in using the flexbox feature.

        <Container style={{display: 'flex'}}>
          <Button color="green" as="a" href="/">
            <Icon name="arrow left" />
            Back to Home
          </Button>
          <Button floated="right" onClick={this.deleteArticle}>
            <Icon name="trash" />
            Delete this Article
          </Button>
        </Container>

https://i.sstatic.net/5XHIM.png

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

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

When a mobile device is rotated, the screen on a jQuery application will automatically shrink

Having trouble with JQM and device rotation on iOS devices. The screen doesn't resize properly when rotated. I have this line in the header to handle display size: <meta name="viewport" content="height=device-height,width=device-width,initial-scal ...

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...

Error in Typescript for the prop types of a stateless React component

When reviewing my project, I came across the following lines of code that are causing a Typescript error: export const MaskedField = asField(({ fieldState, fieldApi, ...props }) => { const {value} = fieldState; const {setValue, set ...

Adjust the position of the IMG to the left side

Struggling with some code and need some assistance: <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> <script> function ru ...

Ways to reduce lag while executing a for loop

How can I optimize my prime number generation process to avoid lagging? For example, is there a way to instantly display the results when generating primes up to 1000? HTML: <!DOCTYPE html> <html> <meta name="viewport" content="width=dev ...

Implementing context state updates within the componentDidMount lifecycle method

I'm struggling with using Reduce in my project, I tried using context. I've set up a global context. I need to update the global context's tid in componentDidMount. Please guide me on how to make this change. GlobalContext.js import R ...

Is there a copyright concern regarding CSS?

There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...

Time Unleashed: Moment.js (Relative time)

I am currently developing a social networking app using react.js. In order to display the relative time when a user adds a post, I am utilizing moment.js. However, I am facing an issue where even if the post was created two days ago, it only displays "a fe ...

What could be causing the malfunction in my Bootstrap navbar?

<!-- Including Bootstrap CSS files locally-->> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bui.css" <!-- Creating a Navbar--> <nav class="navbar navbar-expand-lg navbar-light bg- ...

Using the ternary operator in various CSS rules

Inside a .hover() function, I've written the code below: $(this).css('background-position', circle.includesXY(e.pageX, e.pageY) ? 'bottom' : ''); I'm wondering how to include additional property:value pairs within ...

It is generally not recommended to begin a constructor name with a lowercase letter in jsPDF

I'm attempting to generate a PDF using React const myComponent = () => { const pdfGenerator = () => { const doc = new jsPDF(); //I also attempted: new jsPDF('landscape', 'px', 'a4', 'false'); ...

What is the best way to position these two images side by side in a row?

Is there a way to place both images in the same row while also adding subtitles to each? I've tried different approaches, but I can't seem to align them properly with the subtitles included. <div class="container row-info"> <div cla ...

Setting the size attribute for a Material UI Select component with multiple options: A beginner's guide

I am currently attempting to specify the size attribute on a standard HTML select element. This attribute determines how many options are visible (i.e., the vertical height) in the multi-select dropdown menu. Unfortunately, I have not been able to find any ...

Issue: Unable to 'locate' or 'access' ./lib/React folder while utilizing webpack

I've been delving into the world of React for a while now and decided to experiment with integrating it with webpack. Below is my webpack.config.js : var path = require('path'); module.exports = { entry: './app.js', outp ...

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

Creating a personalized Autocomplete feature using React Material-UI with the help of the renderInput method

I'm currently using a React Material UI Autocomplete component, similar to the one in the official documentation. For example, let's consider a list of countries: import * as React from 'react'; import Box from '@mui/material/Box& ...

Is it possible to dynamically load a CSS link using jQuery in a unique way? Perhaps through the use of $.ajax or another method?

As I have been using jQuery to load various resources like scripts, HTML, XML, and JSON through AJAX, a thought struck me - is it feasible to use jQuery to load or remove CSS files or links when changing the theme of a website? If this is indeed possible, ...

Trying to utilize RegEx for my project, but feeling stuck on how to solve my problem

^\d{1,12}$|(?=^.{1,15}$)^\d+\.\d{1,2}$ This is the current regular expression I am using. I need to adjust the maximum limit to 100,000,000,000 with an option for two decimal places. Additionally, I would like users to be able to inpu ...