List in Order - Concealed Leading Number in 3-Digit Elements

I am facing an issue with a multi-column ordered list that has hundreds of entries. The problem is with the left-most column - once the numbers reach three digits, the first digit gets hidden. So instead of displaying 97, 98, 99, 00, 01, it shows up as 97, 98, 99, 00, 01, and so on.

This problem occurs consistently in both Firefox and Chrome browsers. While I managed to find a temporary fix by adjusting the left margin slightly, it's not an ideal solution as it causes unnecessary white space and shifts everything to the right.

Although experimenting further revealed that altering the list margin could potentially display the missing digit, this led to other issues where excessive white space was created due to extra margins around every list element.

If you wish to see the issue live, check out . The problem becomes evident only after reaching element # 100.

If anyone has suggestions on how to resolve this issue effectively without wasting screen space, please share your ideas here.

csshtml-lists

Answer №1

If my understanding is correct, the best approach would be to modify your markup by shifting towards a flexbox approach rather than relying solely on ordered lists. In this case, adjusting the left margin of the <li> elements may be the only solution, despite the potential increase in white space.

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: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue. I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-togg ...

cssbootstrap-5

Steps to display the "col-md-6" div upon hovering over list items in a different div

I have been trying to make a hover action work in my HTML document. I've managed to get it to work only when the description is a child of the li tag, but I want the description to be displayed as a separate div. <div class="row"> ...

jqueryhtmlcsstwitter-bootstrap-4

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

htmlcss

I'm throwing in the towel on CSS, I just can't seem to get a simple button to sit at the bottom of

Struggling to position a button at the bottom of a div? I've tried everything I could find online but nothing seems to work! Here's my code: <ion-col > <div id="secondCol"> <ion-text> {{card.cardPo ...

htmlcssbuttondivision

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

javascripthtmlcsstwitter-bootstrapflask

Building a Vuetify footer with perfectly centered content: A step-by-step guide

I currently have a setup where I am using the v-flex with a grid ratio of 2 / 8 / 2. This places my content in the center of the section with a width of 8, but the issue is that this centered content does not match up with the other elements on the website ...

htmlcssvue.jsvuetify.js

External CSS styling does not appear to be affecting the Shadow DOM in Google Chrome

I am currently utilizing polymer's paper-action-dialog and paper-button components on my webpage. Within the paper-action-dialog element, there are two paper-buttons. I am looking to style these paper-buttons externally (in the main HTML file). I have ...

htmlcssgoogle-chromepolymershadow-dom

Removing CSS from an HTML document using Gulp

My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file. <!--MATERILIZE CORE CSS--> <link h ...

htmlcssangularjsgulpmaterialize

Instructions for creating a row container:

I'm still relatively new to HTML and I am currently in the learning process. However, I am encountering some difficulties when it comes to linking rows and divs. My goal is to create something similar to the image shown below where each element can b ...

htmlcssflexboxrowmultiple-columns

How does the browser interpret the CSS property transform: none?

Does the transform: none result in matrix(1,0,0,1,0,0) or a different outcome? I am looking to reset the transform; what is the best approach for this? <style> .box{ height: 100px; width: 100px; background-color: red; transition: 0.5s; transform: ...

htmlcsstransform

Clicking on the menu to reveal the dropdown options using JavaScript

I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...

javascriptjqueryhtmlcss

Using an Ember color picker to dynamically change SCSS variables

Is there a way to allow an admin to change the skin of one of my websites by selecting a color from a palette that will update a universal SASS variable? I am aware of methods to dynamically change CSS using jQuery, but I specifically want to modify the S ...

javascriptjqueryhtmlcssember.js

Retrieving all buttons from a webpage and removing those with a specific background-image using JavaScript

Hey everyone, I'm still learning about javascript and other web development languages. My current task is to locate all the buttons on a webpage and remove the ones that have a specific background image. I know about using getElementsByTagName but n ...

javascriptcssbuttonbackground-image

Tips for ensuring that flex-box children can scroll properly

I'm having trouble getting the content to scroll correctly while dealing with nested flex-box structures. Below is my CSS code: html,body,#root{ width:100%; height:100%; padding:0; margin:0; } .flex-fill{ height:100%; width:100%; ...

cssscrollflexboxoverflow

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...

javascriptjqueryhtmlcss

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...

htmlcssfirefox-quantum

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box

The flex reverse-column child's text selection occurred in the incorrect direction

I am having an issue with selecting text in a flex container that is set to reverse column. The selection I make is incorrect because the browser tries to select from the end of the element, resulting in improper selection. For example, <div style=" ...

cssbrowserflexboxselectiontextselection

iOS Safari does not support CSS transforms when applied to parent elements

As a workaround, I decided to create a mockup of the scenario since developing a testable version wasn't straightforward. However, here is the gist of the issue: @keyframes mainFadeIn { 0% { opacity: 0; transform: translateY(-3rem); } ...

htmlcsssass