What is the best way to show inline icons within menu items?

Issue

Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question").

Fig. 1. Display of menu after selection with the icon and text being displayed as block elements.

https://i.sstatic.net/4Rcw9.png

Objective

The desired outcome is to have the style after selection set to display inline, similar to how the options are displayed in the menu prior to selection.

Fig. 2. Menu displaying options before selection with both icon and text showing as inline elements.

https://i.sstatic.net/7V7LE.png

Implementation

Below is the code snippet for reference:

const typeConfig = [
    { value : 'bug'        , label : 'Bug report'      , icon : 'bug_report'      , } ,
    { value : 'positive'   , label : 'Positive review' , icon : 'thumb_up'        , } ,
    { value : 'negative'   , label : 'Negative review' , icon : 'thumb_down'      , } ,
    { value : 'question'   , label : 'Question'        , icon : 'contact_support' , } ,
    { value : 'comment'    , label : 'Comment'         , icon : 'comment'         , } ,
    { value : 'suggestion' , label : 'Suggestion'      , icon : 'feedback'        , } ,
    { value : 'request'    , label : 'Feature request' , icon : 'touch_app'       , } ,
  ]

<FormControl variant="outlined" fullWidth>
  <InputLabel ref={inputLabel} htmlFor="select">{typeLabel}</InputLabel>
  <Select
    value={type}
    onChange={handleChangeType}
    input={<OutlinedInput labelWidth={labelWidth} name="select" id="select" />}
  >
    {
      typeConfig.map( item =>
        <MenuItem key={item.value} value={item.value}>
          <ListItemIcon>
            <Icon>{item.icon}</Icon>
          </ListItemIcon>
          <Typography variant="inherit" display="inline" noWrap>{item.label}</Typography>
        </MenuItem>
    )}
  </Select>
</FormControl>

Answer №1

Key takeaways from feedback

I've incorporated tailwind CSS into my project and successfully applied the inline styles in the following way.

<ListItemIcon className="inline">
  <Icon>{item.icon}</Icon>
</ListItemIcon>
<Typography className="inline" variant="inherit" display="inline" noWrap>    
  {item.label}
</Typography>

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

Are there additional pre-installed themes in Flutter aside from the default theme?

Are there any preset themes available in Flutter besides the default theme? Perhaps other Material color options? ...

Eliminate the JSON object within jqGrid's posted data

The web page I'm working on features Filters with two buttons that load data for jqGrid when clicked. Clicking 'Filter' generates a postData json object and sends it to the server, which is working perfectly. However, I'm facing an is ...

Using AngularJS, you can easily merge one array of data into another array

In my coding environment, I am working with two arrays. The first array is called `$scope.workingSchedules` and it contains data related to working hours for different days of the week. $scope.workingSchedules=[ { ...

Calling a Coldfusion function from JavaScript/jQuery using a remote server connection

Although I am well-versed in JavaScript/jQuery, I am a newcomer to ColdFusion. After extensive research, I still can't figure out what seems like it should be a simple problem. My goal is to trigger a server-side call to a ColdFusion function from wi ...

Unable to access JQuery Draggable method within partial view

In my partial view, I have multiple Divs that are designed to be draggable using the JQuery UI draggable library. The JQuery scripts are included in the master page, and when I view the partial view on its own, everything works fine. However, when I load ...

Ways to transfer information from an axios API to a state in React

I am currently working with an API that consists of an array of objects. My goal is to pass this data into a state in order to display it within a component on a website. First Approach: // Fetches the API data const newData = axios.get(url).then( ...

The validator function is causing an error with the 'lowerCase()' method resulting in an undefined output

Dealing with email validation in a form, I encountered a case-insensitivity issue. Using the angular validation mustMatch to ensure emails match index for index, I needed to address the case sensitivity. This led me to create the matchCaseInsensitivity fun ...

Identification of inappropriate language in usernames

One of the challenges I'm facing is detecting inappropriate language in usernames. Currently, I am using regex to validate the username based on a specific pattern: "/^[A-Za-z0-9]*(\d*\.\d*)*[A-Za-z0-9]+$/" This regex pattern allows u ...

Leveraging configuration files in AngularJS

I'm working on an Angular application that communicates with a Node.js backend Express application. I am using a config file to store environment variables for my Node app. Here's how I access the config file in my Node app: index.js var port = ...

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

css webpack react component not displaying background images

I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...

Every time I attempt to build a React application, I encounter the same error message. I even checked the log file, but it keeps showing the proxy error

An error occurred in the command prompt while installing packages. This process may take a few minutes. Installing react, react-dom, and react-scripts with cra-template... Error: ERR_SOCKET_TIMEOUT The network encountered a socket timeout while trying to ...

What is the best way to define a styleClass for applying this CSS?

Is there a way to create a unique styleClass for the tabbed menu section of the form without affecting anything else? Currently, the CSS I have is applying to everything on the form. a.tab-menu-link:link, a.tab-menu-link:visited { display:block; width:1 ...

What is the best way to showcase distinct sections from several web pages on a single webpage?

I want to showcase multiple web pages on a single page using Iframes. What is the best way to achieve this and display them all together? ...

the slider HTML control is missing a value

Exploring the Range Input Type in HTML When adjusting the value on a slider (Range input type), that value is displayed in a textbox. However, making the same adjustment in the textbox does not update the slider's value. Below is the code snippet: & ...

Harnessing the Power of JSON Data Extraction with JavaScript

I stored the data in JSON format using the setItem method: localStorage.setItem('orderproduct', JSON.stringify([{imageSource: productImg, productTitle: title, productQuantity: qty, productPrice: finalprice}])); When I inspect it, this is how it ...

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

Initializing MongoDB server instance created by NodeJS using npm installation

I've recently installed mongodb on my OSX machine by running the command npm install mongodb in the myapp/node_modules directory while using node.js. However, I'm a bit confused because the mongodb official documentation states that to start mong ...

Using React to redirect a category of components to a specific sub-path, such as transforming "/templates" to "/templates/list"

Having a React app, I'm looking for a way to avoid duplicating the function of redirecting users to /<component>/list in every component if they visit just /<component>. How can this be achieved at a higher level? I have a layout componen ...

Transitioning in Vue.js can be triggered by changing a value up or down

My current transition block component is set up like this: <div v-if="!surveyResultIsReady" class="vh-md-40 position-relative" > <transition name="custom-classes-transition" enter-active-class="animated slideInRight" ...