Ensuring IconButton is perfectly aligned with Text in one straight line

I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted:

JS(ReactJS):

<div>
  <span>
    <h3>Title</h3>
    <IconButton className="editBtn" size="small">
      <EditIcon style={{ fontSize: 25 }} />
    </IconButton>

    <IconButton className="deleteBtn" size="small">
      <DeleteIcon style={{ fontSize: 25 }} />
    </IconButton>
  </span>

  <p>Article</p>
</div>

CSS:

.deleteBtn {
    padding: 3vw !important;
    color: #e71f1f !important;
    width: 5vh;
    border: black;
}

.editBtn {
    padding: 3vw !important;
    color: #4ddd40 !important;
    width: 5vh;
    border: black;
}
cssreactjsmaterial-uifrontend

Answer №1

If we don't have access to the components and context, troubleshooting can be challenging. However, this code example could provide some hints on a possible direction to explore.

.deleteBtn {
  padding: 32px;
  color: #e71f1f;
  border: black;
}

.editBtn {
  padding: 32px;
  color: #4ddd40;
  border: black;
}

.inline {
  display: inline-block;
}
<div>
  <h3>Title</h3>
  <button className="editBtn" size="small">
   Edit
   <span>icon</span>
   </button>
  <button className="deleteBtn" size="small">
   Delete
   <span>icon</span>
   </button>
  <span>Article</span>
</div>

<br/>
<br/>

<div>
  <h3 class="inline">Title</h3>
  <button className="editBtn" size="small">
   Edit
   <span>icon</span>
   </button>
  <button className="deleteBtn" size="small">
   Delete
   <span>icon</span>
   </button>
  <span>Article</span>
</div>

Answer №2

It seems like aligning buttons and headers on the same line is a bit tricky. To address this, I utilized the <span> tag as a workaround.

<div>
    <span>
        <strong>Title</strong>
        <IconButton className="editBtn" size="small">
            <EditIcon style={{ fontSize: 25 }}/>
        </IconButton>

        <IconButton className="deleteBtn" size="small">
            <DeleteIcon style={{ fontSize: 25 }}/>
        </IconButton>
    </span>
    
    <p>Article</p>
</div>

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

Determine the last ListItem in a List using React and Material-UI

Utilizing material-ui alongside React has allowed me to create a dynamic listview with ease: <List> <Subheader>List Title</Subheader> <ListItem primaryText="Option One" /> <Divider /> <ListItem primaryText= ...

reactjsmaterial-ui

Issue with Material UI: Background elements inaccessible while MUI Dialog is active

Currently, I am in the process of styling a Chatbox using MUI and encountering an issue. When the Dialog is open, I am unable to interact with the background elements. Although I can click on the content within the Dialog, I cannot access the background Fo ...

reactjsmaterial-uiresponsive-designfrontendstyling

Is it possible to send fetch requests to dynamic endpoints, such as remote URLs that don't have CORS enabled? Can the http-proxy-middleware library handle using variables in endpoint targets?

Using the fetch('htp://list-of-servers') command, a list of URLs is retrieved: test1.example.com test3.example.com test5.example.com The next step involves executing a fetch() function on each of these URLs: fetch('test1.example.com' ...

javascriptreactjsfetchreverse-proxyhttp-proxy-middleware

Animation unveiling of text slides

I have been working on designing a unique button for my personal diet app project that involves a sliding text effect when the mouse hovers over it. I'm almost there, but I've encountered a major issue that seems impossible to solve. I want the s ...

htmlcsstwitter-bootstrap

What is the best way to set a div's size to a constant value?

I recently designed a webpage that includes a feature where clicking a button adjusts the font size within the div. Within the div, there is a ul containing the buttons. However, when the font size changes, the div expands and the nav buttons also shift a ...

csshtmlfixed

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning

What is the method for obtaining the dynamic parent ID in Next.js?

Traditionally, we retrieve the ID from a dynamic URL. However, in this case, we want to create a nested dynamic route like someurl.com/[slug]/[id]. We have a method to get the ID, but how do we retrieve the slug? ...

reactjsnext.js

Align your content perfectly on a full-screen slick slider

Attempting to center content over a full-screen slick slider from kenwheeler.github.io/slick/, I used a flexbox but the content remains at the edge of the viewport. It seems like an issue with the position tag in the slick CSS, but I can't figure out ...

htmlcsscenterslick.js

Expanding the header in Ionic 3 with a simple click event

I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF: However, I am facing an issue where I want to expand the header on click instead of o ...

htmlcsstypescriptionic-frameworkangular5

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

javascripthtmlcss

Is it just me or does my wrapper always hover above the bottom of the screen?

I have been working on coding a simple layout that I created last year. Most of the work is done, but I ran into an issue where the 'wrapper' div doesn't extend to the bottom of the page as expected. It almost looks like it has the "position ...

css

Is it possible to dynamically override inline styles?

My HTML code is as follows: <div title="remove css"style="position:relative;">Remove my style</div> After the page loads, I need to completely remove the position style attribute. Due to limitations, I cannot override the CSS. Is there a way ...

javascriptjquerycssangularjs

Retrieve an array from a different React component

Currently, I have a Parent component that includes a child component. The parent component code looks like this: import React, { Component } from 'react' import ActivityGenericFields from './activityGenericFields' class Activ ...

reactjs

How about showcasing bigger images in the main body of the page?

When it comes to using CSS sprites for images, the typical advice is to reserve it for smaller images like icons. Why should larger content images only be represented through <img> elements? Are there not benefits to utilizing spriting for all types ...

cssimagecss-sprites

The dynamic alteration of BackgroundImage does not appear to be functioning correctly with tailwind and nextjs

Introduction While working on my weather application using nextJS and TailwindCSS, I encountered a UI issue towards the end of development. Unfortunately, I couldn't resolve this problem alone. My main concern is changing the background image dynami ...

javascriptreactjsnext.jsbackgroundtailwind-css

Utilizing the Autocomplete feature of Material-UI in conjunction with Formik for enhanced form functionality

Attempting to integrate Formik with Material UI's Autocomplete component has been a bit challenging. While other Material-UI components like text fields and selects work smoothly with Formik, implementing Autocomplete is proving to be more difficult. ...

reactjsmaterial-uiformik

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Having worked in web design for quite some time, I recently began working on a basic Angular app that is meant to be very simple. For this project, I am only using the angular files and a single html file as the foundation. As I started setting up the bas ...

javascripthtmlcssangularjscss-selectors

The Nextjs dynamic route page is unexpectedly returning a 403 Forbidden error for a single user on a specific dynamic route

My route is set as patients/[userID].tsx in the pages directory. When attempting to access a specific active userID (e.g. patients/7917067d), I encountered a 403 Forbidden error in the production environment only. In the development environment, it works ...

reactjsnext.jsvercelnextjs-dynamic-routing

What is the best way to adjust a div's size according to the device's screen dimensions?

I'm in the process of developing a web app that will be used on iOS devices, specifically targeting both iPhone 4 and iPhone 5. During my development phase using an iPhone 5 device, everything seemed to fit perfectly and work seamlessly. However, when ...

htmlcss

Discover the secrets to achieving complete customization of your data table's appearance using the DevExtreme React Grid in conjunction with material-ui

I am facing difficulties in styling the DevExtreme React Grid, which I found from their documentation here. Here is the sample code that I copied from another repository. I have a few questions: How can I have complete control over the styling? I noti ...

cssreactjsmaterial-uidevextreme