Typography is breaking lines instead of arranging them in a single row

Trying to use Material ui Typography within a Chip component, but my contents are displaying on two separate rows instead of one continuous row without any line breaks. Here is the code snippet:

  <Typography className={classes.title} style={{ display: 'inline' }} color="textSecondary" gutterBottom>
      {chipName}
      <img src={chipIIcon} style={{ marginLeft: '90%' }} alt="chipIIcon" />
  </Typography>

What might be causing this issue in my code and how can I ensure that both chipName and img are displayed on the same row?

htmlcssreactjsmaterial-ui

Answer №1

To make the layout cleaner, you can switch from marginLeft: 90% to float: right:

<Typography color="textSecondary" gutterBottom>
  {chipName}
  <img src={chipIIcon} style={{ float: 'right' }} alt="chipIIcon" />
</Typography>

Alternatively, consider changing the display of Typography to flex and adjusting justifyContent to space-between (It's recommended to use classes instead of inline styles):

<Typography style={{ display: "flex", justifyContent: "space-between"}} color="textSecondary" gutterBottom>
  chipName
  <img src={"chipIIcon"} alt="chipIIcon" />
</Typography>

Check out the demo here

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

Error encountered when sending a POST request: net::ERR_CERT_COMMON_NAME_INVALID

Trying to send a POST request from a React app hosted on Firebase to an API built with express.js and Firebase Cloud Functions is resulting in failure. The error message received is: POST "Request URL" net::ERR_CERT_COMMON_NAME_INVALID Upon rese ...

reactjsfirebaseexpressgoogle-cloud-functionsfirebase-hosting

Using brackets to access and manipulate imported objects

Within my redux store, I am storing multiple items in an array which are injected as exports. To better understand, I have a separate file where I define objects like this: export const item1 = { name: 'item', } export const item2 = { ...

reactjsreduxstore

Associate the ng-model with ng-options value and label

I'm currently using ng-options to create a select tag that displays location options. The labels represent the location names, while the values indicate the corresponding location ID as stored in the database. In addition to binding the value (locati ...

javascripthtmlangularjsangular-ngmodelng-options

chaotic telerik editor arrangement

I have incorporated the Rad Editor into my ASP.NET page. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadEditor ID="reSummery" runat="server" > </telerik:RadEditor> Despite not referencing ...

javascriptasp.netcsstelerikstyles

Error message: Please provide an expression with const in React JS component

Can you assist me with this issue? I am trying to determine if the user is registered. If they are registered, I want to display the home URL, and if they are not registered, I want to display the registration URL. To do this, I am checking the saved dat ...

javascriptreactjscomponents

Using TypeScript to style React components with the latest version of Material UI, version

Styled typography component accepts all the default typography props. When I include <ExtraProps> between styled() and the style, it also allows for extra props. const StyledTypography = styled(Typography)<ExtraProps>({}) My query is: when I r ...

reactjstypescriptmaterial-uistyled-componentsreact-typescript

Column div being obscured by footer

My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...

htmlcss

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

My upload.php file saves images into an uploads/ folder within my main directory. I am looking to dynamically add a new li tag to my index file each time an image successfully uploads. Here is a snippet from index.php: <ul> <li><im ...

javascriptphphtmlimagehtml-lists

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

I am attempting to display different content on hover over text, specifically listing various HTTP error codes. My setup includes 3 icons and text that will reveal specific content based on the text hovered over: success error blocked Below is the JS cod ...

javascriptjquerycss

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

javascripthtmlsvgjointjs

Issue with Redux-toolkit when removing an item: No change observed

I am currently working on a project that involves managing multiple salaries. I encountered an issue while attempting to delete a salary, as the action did not take effect and had no impact on the network. I believe the problem lies within the receipt fil ...

reactjsmaterial-uiredux-toolkit

Connecting CSS auto-complete with JSP content within Eclipse

Is there a way to connect the CSS autocomplete with the content of a JSP page? For instance, if I have an element like <div id="myid"> in the JSP file, can Eclipse auto-complete "myid" when typing "#" in the CSS file? I am aware that NetBeans has th ...

csseclipsejsp

The simple React app encountered an error with no matching overload for the call

Currently, I am in the process of learning React and running the code snippet provided below: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class App extends Component { ...

reactjs

Attempting to establish a means to switch between languages

Currently, I am in the process of implementing a language switch feature for a website project that I am currently working on. This feature will allow users to seamlessly switch between English, Latvian, and Norwegian languages. To achieve this functionali ...

javascripthtmlcssweb-development-server

Javascript AppendChild Problem with Internet Explorer

When it comes to this particular snippet of code, everything seems to run smoothly in Firefox and Chrome. However, Internet Explorer is causing some major headaches. var anotherDiv= document.getElementById("anotherDiv"); var destination = document.getElem ...

javascriptinternet-explorerhtmlinternet-explorer-8appendchild

How can I extract the text within a Span tag using Selenium WebDriver?

Is there a way to retrieve the text from a span tag and print it using Selenium Webdriver? I am looking to extract the text UPS Overnight - Free The HTML code is as follows: div id="customSelect_3" class="select_wrapper">> <div class="select ...

javahtmlseleniumselenium-webdriver

Tips for stopping multiple executions of dispatch using hooks

I am currently working on a React Redux project where I need to make an API call and periodically update the progress value displayed on the screen. To achieve this, I am using a combination of useEffect and useState hooks. However, I have encountered an i ...

reactjsreduxreact-redux

Transferring Data Between Tables in ASP.NET Core

I'm in the process of creating a new online store with ASP.NET Core. I have a requirement to transfer data from the Products table to the Items table upon clicking a button, so that the item information can be displayed on the shopping cart page. Any ...

htmlasp.net-core

Updating React Form State with Redux Props

I have a custom component that receives data from its parent using Redux. This component is responsible for managing a multistep form, allowing users to go back and update input fields in previous steps. However, I'm facing an issue with clearing out ...

reactjsredux