CODEWITHSUNDEEP
javascripthtml
MrOzzy99
MrOzzy99

Reputation: 61

Javascript & HTML - Place <ol> number after <li> title

On my test page I've set it up to create an <li> element inside an <ol> when a <button> is pressed. Let's say the list title is "Problem". Instead of "1. Problem", I'd like it to be "Problem 1.". Is there a way to put the <ol> digit after the list title?

        <form>                                              
            <button type="button" id="btn_add_task" class="btn btn-primary" title="Lägg till fler att-satser.">+</button>       
        </form>           

            <ol id="list_tasks" style="font-style:italic; font-size: 18pt; padding: 0">
            </ol> 

            <script>            
                function $(element) {
                    return document.getElementById(element);
                }

                var taskSubmit = $('btn_add_task');
                var taskBox = $('text_task');
                var taskList = $('list_tasks');

                taskSubmit.addEventListener('click', function(e) {
                    e.preventDefault();
                    var att = 'att';
                    var attNum = 1;

                    var newLI = document.createElement('li');
                    var newText = document.createElement('textarea');

                    newLI.appendChild(document.createTextNode(att + attNum + ': '));                    

                    spanNum.id = 'val';
                    newLI.id = 'list';
                    newText.className = 'attText';
                    newText.rows = 1;

                    taskList.appendChild(newLI);
                    taskList.appendChild(newText);

                }, false);
            </script>

Upvotes: 0

Views: 214

Answers (4)

mc01
mc01

Reputation: 3770

Adapted from responses to this existing question on customizing <ol> list elements. You can put various things in the li:before pseudo-element, but you need to play w/the margins and padding a bit to ensure things line up & are properly spaced.

  • Left margin for the li itself can be used to indent & align the text content.
  • Left margin for li:before is negative & equal to left margin of li
  • Width of the li:before must accommodate the full width of the leading number & other content.
  • Padding of li:before sets the distance between "Problem #." and the text itself.
  • Text-alignment left of li:before keeps "Problem" aligned regardless how many numbers you have. 

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

li {
    display: block;
    margin-left: 5.5em;
    margin-bottom: 1em;
 
}

li:before {
    content: "Problem "counter(item) ".";  
    counter-increment: item;
    display: inline-block;
    text-align: left;
    width: 5em;                  
    padding-right: 0.5em;
    margin-left: -5.5em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

Upvotes: 2

Andr&#233;le
Andr&#233;le

Reputation: 336

Here a simple solution just with CSS:

http://codepen.io/anon/pen/adVPrN

HTML:

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

CSS:

ol {
  list-style: none;
  counter-reset: li;
}
ol li:after {
  counter-increment: li;
  content: " " counter(li) ".";
}

And here the MDN site for the CSS counter: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Upvotes: 0

matharden
matharden

Reputation: 785

CSS

ol[dir=rtl] {
  list-style-position: inside;
}

Then HTML would be

<ol dir="rtl">
 <li>Problem</li>
 <li>Something else</li>
</ol>

Upvotes: 0

NachoDawg
NachoDawg

Reputation: 1544

The closest would be

<ol dir="rtl">

Upvotes: 0

Related Questions