Sliding Side Menu

[wnielson]

Hi wnielson,

I am trying to use the slide navigation in one of our projects. I am facing some issues when displaying aligned text in the list can you suggest how i can achieve this.

This is how i would like to show the list when it is opened.
<Image> <Test> <Count>,

So in the title of each item i am formatting like this

title: '<div class="sncontainer">' + 
'<img src="resources/images/Chrysanthemum.jpg" />' +           '<div class="item">' +          '<span class="lefttext">Big Item Name</span>' +          '<span class="righttext">20</span>' +          '</div>' +        '</div>'

CSS:

.sncontainer {    display: inline-block;    -webkit-box-orient:horizontal;    -webkit-box-pack:start;    -webkit-box-align:start;    width: 100%;    height: 32px;     img     {        float:left;        width: 32px;        height: 32px;        -webkit-box-shadow: 2px 2px 2px 2px #88888;    }     .item     {        margin-top: 8px;        margin-left: 40px;        font-family: Arial;        font-size: 12px;        font-weight: bold;                         }     .lefttext    {        float: left;    }            .righttext    {        float: right;        background: #484848;        border: 1px solid #888;    }}

My Problem is that, as the list is occupying 100% i am not able to see the right aligned text in the list when the menu is opened.

If you target the "x-list-item-inner" element and fix the width you should be able to achieve what you want.