I have been building a plugin for the CRX robot. On one of our details.ishtm pages we are using a listSelect object with 10 listSelectOptions. The list is functional but I can not seem to get the width="###" to output any changes to the actual individual buttons.
Here is the bit of the HTML that should be relevant:
Code
.formLine2 {
margin: 40px 0 0 20px;
width: 450px;
font-size: 20px;
padding-left: 12px;
padding-right: 10px;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="content">
<div id="cmaLogo">
<img src="CM_LogoTag_FullColor.png" width="200px">
</div>
<div class="formLine2">
<ihmi type="listSelect" designpattern="touch" id="selectList" icon="false" horizontal="true">
<ihmi type="listSelectOption" value="0" width="100" >{{Lang_dict.list0}}</ihmi>
<ihmi type="listSelectOption" value="1" width="50" >{{Lang_dict.list1}} </ihmi>
<ihmi type="listSelectOption" value="2" width="50" >{{Lang_dict.list2}} </ihmi>
<ihmi type="listSelectOption" value="3" width="50" >{{Lang_dict.list3}} </ihmi>
<ihmi type="listSelectOption" value="4" width="50" >{{Lang_dict.list4}} </ihmi>
<ihmi type="listSelectOption" value="5" width="50" >{{Lang_dict.list5}} </ihmi>
<ihmi type="listSelectOption" value="6" width="50" >{{Lang_dict.list6}} </ihmi>
<ihmi type="listSelectOption" value="7" width="50" >{{Lang_dict.list7}} </ihmi>
<ihmi type="listSelectOption" value="8" width="50" >{{Lang_dict.list8}} </ihmi>
<ihmi type="listSelectOption" value="9" width="50" >{{Lang_dict.list9}} </ihmi>
<ihmi type="listSelectOption" value="10" width="50" >{{Lang_dict.list10}} </ihmi>
</ihmi>
</div>
</div>
Display More
an inspection of the pendant page show these elements being evenly spaced @ 34px
Code
<div id="selectList" class="list-select touch list-select-horizontal">
<ul>
<li class="list-select-option selected" data-value="0" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-on" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">X(User)</div></li>
<li class="list-select-option" data-value="1" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">A </div></li>
<li class="list-select-option" data-value="2" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">C </div></li>
<li class="list-select-option" data-value="3" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">E </div></li>
<li class="list-select-option" data-value="4" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">F </div></li>
<li class="list-select-option" data-value="5" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">H </div></li>
<li class="list-select-option" data-value="6" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">J </div></li>
<li class="list-select-option" data-value="7" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">L </div></li>
<li class="list-select-option" data-value="8" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">P </div></li>
<li class="list-select-option" data-value="9" tabindex="0" style="width: 34px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 26px;">U </div></li>
<li class="list-select-option" data-value="10" tabindex="0" style="width: 44px;"><div class="list-select-option-left" style="width: 0px;"><ins class="list-select-mark ihmicomponent-large-radiomark-off" style="display: none;"></ins></div><div class="list-select-option-right" style="width: 36px;">Y </div></li>
</ul>
<div class="clearfix hide"></div>
</div>
Display More
from the ihtemplates.vut file in the ihmicomponents source it seems that the listSelectOption should have a width input:
Code
//////////////////////////////////////////////////////////////////////////////////
// listSelectOption
// [class (String)] class name
// [width (String)]
//////////////////////////////////////////////////////////////////////////////////
<% template listSelectOption %>
<li class="list-select-option<% if class %> $(class)<% end %>" data-value="$(value)" tabindex="0" <% if width %>style="width: $(width)px;"<% end %>><div class="list-select-option-left"><ins class="list-select-mark ihmicomponent-large-radiomark-off"></ins></div><div class="list-select-option-right">$(body)</div></li>
<% end %>
What am I missing here?