1

I am trying to make a list of Football players. Therefore I have this jsFiddle. However, I would like the number of the ol to be placed inside an icon. The problem is that two digit numbers overflow that icon. How to fix this?

My CSS is:

ol {
    display: inline-block;
}
ol.ui-listview>li>.ui-btn:first-child:before, ol.ui-listview>li.ui-li-static:before, ol.ui-listview>li.ui-field-contain>label:before, ol.ui-listview>li.ui-field-contain>.ui-controlgroup-label:before{
    content: counter(listnumbering) !important;
}

#slots {
    text-align: center;
}
gsamaras
  • 71,951
  • 46
  • 188
  • 305
  • There are many options in this thread and I think a few suit you need of fitting in text with more than 1 digit. Have a look if you haven't done already - http://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle – Harry Sep 05 '15 at 13:52
  • @Harry I had seen that and the top answer was good. However, it interferes with jQuery mobile and things fall apart! – gsamaras Sep 05 '15 at 13:56
  • 1
    Oh ok. I'll leave the comment there just so that somebody else doesn't link it again. – Harry Sep 05 '15 at 13:58

1 Answers1

2

Try this css

ol {
    display: inline-block;
}
ol.ui-listview>li>.ui-btn:first-child:before, ol.ui-listview>li.ui-li-static:before, ol.ui-listview>li.ui-field-contain>label:before, ol.ui-listview>li.ui-field-contain>.ui-controlgroup-label:before{
    content: counter(listnumbering) !important;
    text-align:center;
}

#slots {
    text-align: center;
}

ol > li > a{padding-left:9px !important;}
Oleksii Artiukh
  • 384
  • 1
  • 9