I am adding items to a Kendo List View dynamically.
In one of the list view items we add in some label text and then place 2 buttons.
The text can be anywhere from 1 - 15 characters.
We want to first button placed to always start at the 50% of total width.
The second button (this works OK) we place 5px from the right margin.
I am having a problem try to figure out how to put that button at the 50% total width mark, seems like it should be easy, but using margin always starts from the end of the text.
I am trying to come up with a formula that will work in general for most devices regardless of orientation so the width would be anywhere from 320 - 1024 and maybe more for high resolution tablets and monitors.
Here is some code that I have been using - any help from list view guru's appreciated.
<div data-role="view" id="ListSample" data-title="My List View">
<form>
<ul id="mylistview" data-role="listview"></ul>
</form>
</div>
Here is the code to place the item in the list view// label text - this can vary in length 1 - 15 characters:
// define test
var textLabel = 'ABC 123';
// get length of text
var textLength = detailData[i].PROMPT.length;
// assume 4 pixels per character - this is not accurate but what I was trying
var textPixels = textLength * 4;
// figure out left margin percent from
marginPercent = (66 - ((textPixels/$(document).width())*400)) + '%';
// now append the list view item
$('#mylistview').append('<li><label>'+textLabel+'<a data-role="button" data-icon="camera"
class="km-button" onclick="onCamera()" style="marginleft:'+marginPercent+'; width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"><span class="km-icon km-camera km-notext"></span></a></label><a data-role="button" class="km-button" on click
="onPreview()" style="float:right;margin-right:5px;width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"></a>
</li>');
In one of the list view items we add in some label text and then place 2 buttons.
The text can be anywhere from 1 - 15 characters.
We want to first button placed to always start at the 50% of total width.
The second button (this works OK) we place 5px from the right margin.
I am having a problem try to figure out how to put that button at the 50% total width mark, seems like it should be easy, but using margin always starts from the end of the text.
I am trying to come up with a formula that will work in general for most devices regardless of orientation so the width would be anywhere from 320 - 1024 and maybe more for high resolution tablets and monitors.
Here is some code that I have been using - any help from list view guru's appreciated.
<div data-role="view" id="ListSample" data-title="My List View">
<form>
<ul id="mylistview" data-role="listview"></ul>
</form>
</div>
Here is the code to place the item in the list view// label text - this can vary in length 1 - 15 characters:
// define test
var textLabel = 'ABC 123';
// get length of text
var textLength = detailData[i].PROMPT.length;
// assume 4 pixels per character - this is not accurate but what I was trying
var textPixels = textLength * 4;
// figure out left margin percent from
marginPercent = (66 - ((textPixels/$(document).width())*400)) + '%';
// now append the list view item
$('#mylistview').append('<li><label>'+textLabel+'<a data-role="button" data-icon="camera"
class="km-button" onclick="onCamera()" style="marginleft:'+marginPercent+'; width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"><span class="km-icon km-camera km-notext"></span></a></label><a data-role="button" class="km-button" on click
="onPreview()" style="float:right;margin-right:5px;width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"></a>
</li>');