Changing the line height causes the bullet position to shift downwards

Here is a bullet list:

          <ol className="graphkregular mt-2" style={{ display: "listItem" }}>
            <li>
              <small>{popupData.content[0].split("\n").join("\n")}</small>
            </li>
            <li className='mt-2'>
              <small>{popupData.content[1].split("\n").join("\n")}</small>
            </li>
          </ol>

When I adjust the line height and display, the bullets shift downward:

small {
  line-height: 1.4em;
  display: inline-block;
}

Does anyone know how to fix this issue? Here is an example image for reference:

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

Answer №1

Consider eliminating the top margin on the ol tag's CSS class

Answer №2

To fix it, simply delete the line of code that says display: inline-block; within the small tag.

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

What is the best way to flatten a nested array of objects with lodash?

I'm trying to convert a JSON object into a different format using JavaScript and lodash: { "BidNumber": 2, "BidResult": 1, "BidAmount": "6756", "BidData": [ { "name": "JonSnow", "Data": "Standard data f ...

Clicking on React opens the full picture

I'm encountering an issue in my react project where the pictures I fetch from a JSON file don't open in full screen when clicked individually. Instead, they all open at once. As a newcomer to React, I suspect that my current approach might be inc ...

Popstate functionality not functioning correctly, requiring multiple consecutive clicks

I am currently delving into the world of History Web API, but I've encountered my first challenge. While I have successfully implemented history.pushState, I am facing difficulties with popstate. It works perfectly the first time after an AJAX page l ...

ng-class not acting as the main class, as initially anticipated

I have a set of icons that can be either "active" or "inactive" based on boolean values in the $scope. To visually differentiate between them, I've created two CSS classes called activeIcon and inactiveIcon that simply change the color. Currently, all ...

How do I reset and resubmit a form while utilizing Redux-Form for search filters?

New Update: Check out this Pen Example https://codepen.io/anon/pen/vwzGYY?editors=0011 Introduction After conducting my research, it appears that I may need to approach this problem from a different angle. Do you have any suggestions for me? Situation ...

Show off on social media but not in person

Check out this HTML snippet: <div class="d-sm-flex flex-sm-row flex-sm-row-reverse"> <div class='ml-2'></div> <div class='ml-2'></div> <div class='ml-2'></div> </div> ...

Upon successful completion of the Ajax call, refresh the page without causing any blinking

Hey there, I'm facing an issue with my website, I've implemented ajax to fetch data from my API, and upon successful retrieval, I need to reload the page to display the information, However, sometimes the page blinks before reloading, while oth ...

Creating JSON files in JavaScript - Issue with adding data

My goal is to generate a unique JSON dataset structured in the following way: JSON: { "category": { "id": "10100", "name": "Dessert", "products": [ ...

Incorporate web control's stylesheet into page with UpdatePanel registration

What is the most effective way to register a stylesheet only once on a page using a custom web control? Keep in mind that the page utilizes an UpdatePanel for asynchronous calls. I attempted placing the <link> tag in ScriptManager.RegisterClientScrip ...

Persisting cache in NextJS ShadhUI datatable for enhanced performance

Currently utilizing nextjs v14.2 and react v18.3 In the process of constructing a ShadUI data table based on the guidance and code provided at . The implementation involves a columns definition file. Below is an excerpt from that file along with the page ...

Having trouble with jQuery toggle fade: Unable to make the div fade in/out when toggling

Is there a way to modify the functionality of my black button so that when clicked, the red div fades out while the blue div fades in? Right now, clicking the button switches between the two divs without any fading effect. Fiddle: http://jsfiddle.net/ddac ...

Guide: How to change a sibling component's state from another sibling or imported component in REACT

Greetings! I have recently delved into the world of ReactJS and have been experimenting with import and export functions. To give you an idea, my app has a structure consisting of 3 separate files - a parent component and two children components. My questi ...

Saga is continuously executing the identical API request

I am just starting to work with Sagas and I need some assistance in understanding why my saga continues to make an API call upon reload. Below is the code that I am working with. import axios from 'axios'; import { put, takeEvery } from 'red ...

Transforming an array of HashMaps into a JSON object within a servlet and showcasing it on a JSP page

Looking to extract all table rows and store them in an array of hashmaps, then convert them into a JSON object to be sent to a JSP page using Ajax and jQuery. Struggling with displaying the content on the JSP page. I've written the code below but need ...

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...

Pairing up with JavaScript

Currently in the process of developing a web interface for XBMC that involves ajax. Because of the limitations of our ajax functionality, I had to resort to using local resources instead of my usual ajax class which generates output. I am working with a sp ...

Issue arose following implementation of the function that waits for the event to conclude

I've encountered a problem with my HTML and jQuery Ajax code. Here's what I have: <form> <input name="name_field" type="text"> <button type="submit">Save</button> </form> $(document).on("submit", "form", fu ...

Accessing Firebug in Selenium webdriver is a straightforward process that involves downloading and

Seeking guidance on how to approach a requirement using Selenium webdriver as I am new to it. The requirement entails: Select the note icon to open a 'note' pop up. Then, open Firebug within the pop-up. Access the script option in Firebug, se ...

What are the methods for removing the color green with CSS or JavaScript?

Is it possible to isolate only the red and blue color components in an image or text using CSS 'filter' feature? If so, can someone please provide guidance on how to do this? Thank you. ...

Unable to bring in Blender 2.79 JSON files using THREE.js

Working on a 3D graph visualization within an Angular project using the 3D Force Graph library. I'm attempting to incorporate 3D models created in Blender as nodes in the graph. However, when trying to import the object using three.js, it returns unde ...