Designing a unique CSS menu layout: Effortlessly positioning text beneath an icon

I have a sandbox below. The width of the sidebar has been set to fixed. I am attempting to position the menu text below the icon, but it doesn't show up when I try wrapping it with div or span elements.

Do I need to use a flex container?

      <Menu.Item key="1" style={{ height: 80 }}>
      <div style={{height: 80, display: "flex", textAlign: "center"}}>
        <Icon type="pie-chart" />
        <span>Option 1</span>
        </div>
      </Menu.Item>

https://codesandbox.io/s/upbeat-mirzakhani-hhm7v?fontsize=14&hidenavigation=1&theme=dark

https://i.sstatic.net/oPeGJ.png

What is the best way to achieve the layout shown below?

javascriptcsslayoutflexbox

Answer №1

If you're looking for a way to add text below Font Awesome icon links, check out the following example that has already been tested and demonstrated: Link: How to Display Text Below Font Awesome Icon Links Try incorporating this solution into your project using HTML and CSS techniques.

Answer №2

<Menu.Item key="1" style={{ min-height: 80 }}>
   <div style={{min-height: 80, height: "auto", display: "flex", textAlign: "center"}}>
      <Icon type="pie-chart" style={{display: "block"}}>/>
      <span>Option 1</span>
   </div>
</Menu.Item>

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

Implement a click event for the newly added item

I am struggling to attach a click event to an element that I dynamically added using jQuery. When the item is present in my HTML code, everything works as expected. Please refer to the code below for clarification: HTML <div id="addNew">Add new Ite ...

javascriptjqueryhtmlclickappend

Issue with promises in angular.js + node.js/electron integration is causing malfunctions

I have integrated angular.js with electron and node-orm to communicate with a database. The find/get functions in Node-orm are asynchronous, so I attempted to use Promises in a service to retrieve data like this: app.service('SearchService', fu ...

javascriptangularjsnode.jselectron

I'm looking to retrieve the current caret position within a text-field using JavaScript/Vue. Any suggestions on how to achieve this?

I am exploring a slight improvement to enhance user experience by allowing users to modify the dollar amount in a text field if the cents are fully entered. Currently, when users move to another field (triggering an @blur event), my fields automatically a ...

javascripthtmlvue.jsvuejs2vuetify.js

issue encountered while passing a callback in a res.render() function

Currently, I am working on a small application where I am fetching data from remote JSON files to generate statistics that will be displayed in an EJS file later. My objective is to pass separate values for rendering and then utilize them within the EJS d ...

javascriptnode.jsexpress

What is the best way to implement window.load in React Native?

I'm encountering an issue with a simple button on my page in Expo/React Native. When I try to navigate to a new page using window.open upon clicking the button, I receive an error message saying "undefined is not a function." Although I am utilizing ...

javascriptreactjsreact-nativeexpo

The magic of React.js in creating fluid scrolling single page applications

Embarking on my journey with react.js, my aim is to develop a single page application where the top navigation links smoothly scroll to the relevant sections on the front page akin to THIS SITE. Currently, my application utilizes React.js and React-Router ...

javascriptreactjssingle-page-applicationreact-router

Upgrade your React component by replacing componentWillReceiveProps with getDerivedStateFromProps

It's clear that componentWillReceiveProps has been deprecated and we are instructed to replace it with getDerivedStateFromProps. However, they don't seem to serve the same purpose at all. Moreover, getDerived... cannot access or setsetate. After ...

javascriptreactjs

Creating art on touch-enabled devices using the HTML5 canvas

I need help getting a signature pad to function properly. After successfully implementing code for mouse input using this resource: , I am facing issues with its functionality on mobile devices, despite adding event listeners. canvas.addEventListener("to ...

javascripthtmlcanvas

Generate unique div elements randomly using jQuery and Javascript to populate a container

My website has a section that spans 100% width and is 450 pixels tall. This is the HTML structure... <section class="interactive-banner"> <figure></figure> </section> I am aiming for each 'figure' element to be 150 ...

javascriptjqueryhtml

Adjust page to fit any size of screen resolution

Currently, I am in the process of designing a print template for my website. Everything seems to be going smoothly except for one issue that has arisen. The screen resolution on my device is 1600x900, so I have designed the page specifically for this resol ...

htmlcss

Learn how to define a specific time frame on a Grafana dashboard using text panels

In my current situation, I am looking to develop a text panel within the Grafana Dashboard that includes both JavaScript and HTML. My goal is to have the ability to specify the time range directly from this panel. While I understand that we can retrieve t ...

javascriptangularjsgrafana

Looking to set the "min" attribute for an input type="date" in HTML5 with a specific date format preselected?

My upcoming date has a specific format as detailed below. Date_received = Tue Apr 05 2016 00:00:00 GMT+0530 (India Standard Time) To set the 'min' attribute for the HTML5 input type="date" datepicker, I need to initialize it using the following ...

javascriptjqueryangularjshtml

What is causing my HTML select element to prevent me from accessing its options?

In my HTML, I have a select element that is populated with options using JavaScript. <select name="send_hour" class="input-mini" id="send_hour"></select> I am trying to access the length of the options using JavaScript. $("#send_hour").optio ...

javascriptjqueryhtml

Encountering issues with bidirectional data binding functionality

I have integrated a pagination component from ng-bootstrap into a generic component that includes a select dropdown to choose the number of items per page. I triggered an event from this generic component and caught it in the parent component (member-list. ...

javascriptangulartypescripttwo-way-binding

How can I utilize the JQuery GetJSON function to retrieve HTML content from an external webpage?

Imagine you're attempting a jQuery ajax request like this: $.ajax({ ... url: http://other-website.com ... }) You probably know that due to the same-origin policy, this request will fail because the URL is for an external domain. But the ...

javascriptjqueryajaxjsonhttp

Redirecting to a blank homepage using PHP

Having trouble with this code. After logging in, I'm not redirected to the home page, but instead, I stay on the login page. I want users to be redirected to (http://localhost/trial/index.php#Home) once successfully logged in. How can I fix this? < ...

javascriptphpjqueryhtmlmysql

What is the process for linking an HTML document to another HTML document within a div using jQuery?

Check out my HTML code: <!DOCTYPE html> <html> <head> <title>Hilarious Jokes!</title> <meta charset="utf-8"> <link href="final%20project.css" rel="stylesheet"> <script src=" ...

javascriptjqueryhtmlajax

Ways to dynamically emphasize text within ngFor loop

Within my ngFor loop, I have a set of rows. <div *ngFor="let block of data;"> <div class="class-row"> <div class="left">A Label:</div> <div class="right">{{block.key1}}</div> </div> <div class="clas ...

javascriptangularangular2-template

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react

Paper.js - generate a collection of movable shapes

I am attempting to use paper.js to create draggable shapes where the index of each shape is provided during dragging. Unfortunately, I keep encountering an error that says "Uncaught TypeError: Cannot read property 'position' of undefined". If a ...

javascriptpaperjs