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

Troubleshooting Cross-Origin Resource Sharing problem in launching Next.js 13 application on Vercel with MongoDB integration

Having trouble with CORS errors while trying to deploy my Next.js 13 application on Vercel, especially when using a MongoDB-based API. The API is for basic CRUD operations, and here is how I currently have my fetch set up: // individual PUT/DELETE/GET ...

reactjsnext.jscorsvercel

A guide on how to locate a specific marker in react-native-maps using its unique

I've been doing some digging, but I'm struggling to find a solution for extracting the coordinates of a react-native-maps marker based on the provided ID. Unfortunately, I keep encountering an error message that says "undefined is not an object." ...

reactjsreact-nativereact-native-maps

Modify the text of a button when hovered over (JavaFX)

Can anyone help me figure out how to change the text of a button when it is hovered over? Approach: if (button.isHover()){ button.setText("new message"); } I'm open to either a css fix or a code solution! ...

javacssjavafx

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

javascripthtmlcssangularjs

Navbar Username in Next.js with Typescript and Supabase Integration

I'm currently facing an issue with retrieving the username of a user to display in my navbar. The desired username is stored in the "username" column of the table called "profiles" in my Supabase database. However, the data that's populating the ...

reactjstypescriptnext.jssupabasesupabase-database

Setting up Cloudfront and S3 to direct all routes to index.html: A step-by-step guide

I am currently running a NextJS application on AWS. The organization of my folders is as follows: - index.html - /articles -- index.html -- /article1 ---- /index.html -- /article2 ---- /index.html . . . I am looking for guidance on how to configure the ...

reactjsamazon-web-servicesnext.js

Discover the best practices for implementing light secondary colors in material-ui framework

I have a question about utilizing different colors from my theme palette: palette: { primary: { main: '#d05ce3', }, secondary: { light: '#0066ff', main: '#0044ff', }, While I know how to use the secondary color like ...

reactjsmaterial-designmaterial-ui

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

I have developed a date picker that utilizes the Jalali calendar. While attempting to pass error checking using the error prop in the following code: <LocalizationProvider dateAdapter={AdapterJalali}> <MobileDatePicker label={lab ...

javascriptreactjsmaterial-uireact-datepicker

Generating CRA and setting up Github actions

After successfully deploying my app with Firebase-tools (v11.23.1) the first time, I encountered issues on subsequent attempts. As a newcomer to Firebase and Github actions, I'm seeking guidance on resolving this issue. Any help would be greatly appre ...

reactjsgithub-actionscreate-react-appfirebase-tools

The website does not display properly on larger screens, while showing a scrollbar on smaller screens

I'm encountering an issue with my website where I can't seem to find a solution no matter what I try. My goal is to ensure that my website looks consistent across all computer screen sizes. However, when viewed on larger screens, there's a ...

htmlcss

Issue with retrieving URL parameters in Nextjs during server side rendering

Currently, I'm attempting to extract the request query, also known as GET parameters, from the URL in server-side rendering for validation and authentication purposes, such as with a Shopify shop. However, I am facing issues with verifying or parsing ...

javascriptreactjsnext.js

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

CSS Grid having trouble with wrapping elements

Greetings to all, As a newcomer to the world of web development, I am currently exploring the wonders of the CSS grid tool. However, I have encountered a roadblock: My intention is for the cards to automatically flow one by one into the next row while ma ...

htmlcsslayoutcss-grid

Is there a way for my React app to display a 404 error page for a non-existent document?

Hey there! I recently submitted my website to a search engine, but encountered an error stating "Your non-existing pages don't return status 404". I'm not sure how to go about returning this status. I've been trying to solve this issue, but ...

node.jsreactjsexpress

Guide to creating a React session with Axios:

Managing people with authentication/authorization using a Nest backend and session. Postman working fine, important bits are the Interceptor and Guard: Guard.ts canActivate(context: ExecutionContext) { const request = context.switchToHttp().getReques ...

reactjssessionaxiosnest

How can I modify the appearance of a slider's range?

I'm struggling with customizing the style of a price slider input range. No matter what I do, the changes don't seem to take effect. Can anyone pinpoint where I may be going wrong? Appreciate any guidance on this! Thank you! <div class=" ...

javascripthtmljquerycssslider

State update is being delayed in the process of updating the state

Having trouble sending my form data to an API with this code: const handleSubmit = () => { setData({ ...data, apellidoParterno: inputs.apellidoParterno, apellidoMaterno: inputs.apellidoMaterno, ...

reactjsreact-hooksuse-state

FirebaseError: Firebase: It is necessary to supply options when not being deployed to hosting through the source

My current challenge is to figure out how to connect a Next.js project with Firebase. In my config.js file, I have the following code: import { initializeApp } from 'firebase/app'; import { getAuth } from "firebase/auth"; import { getF ...

reactjsfirebasenext.js

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

javascripthtmlcss

How to Align Title in the Center of a Section Containing Multiple Images?

I have a situation where I am using a StyledHead section to display 10 images from an API. The images are wrapped in another section called StyledHeader, which also contains an h1 element. How can I center the h1 element both vertically and horizontally so ...

cssreactjsstyled-components