html<label>
Multiple lines
<input mbsc-input id="my-select" data-dropdown="true" />
</label>
js$('#my-select').mobiscroll().select({
itemHeight: 60,
maxWidth: 400,
data: [
{ value: 1, text: 'Percentage of assets covered by systematic risk assessments (>99)' },
{ value: 2, text: 'Number of personal vacancies in the security roles required for ISMS (Nil)' },
{ value: 3, text: 'Time taken to grant, change and remove access privileges (Max. 2 hours)' },
{ value: 4, text: 'Percentage of agents covered by an effective security awareness program (100%)' },
{ value: 5, text: 'Number of security access violations (<2)' },
{ value: 6, text: 'Number of emergency changes (<5)' },
{ value: 7, text: 'Number of security incidents involving malicious code (Max. 2)' },
{ value: 8, text: 'Number of systems where security requirements are not met (Max. 2)' },
{ value: 9, text: 'Average turnaround time of incidents (Max. 2 hours)' },
{ value: 10, text: 'Number of pending actions to meet response and recovery requirements (Max. 5)' },
{ value: 11, text: 'Number of scheduled internal audits not done (Max. 1)' },
{ value: 12, text: 'Number of scheduled penetration tests not done (Max. 1)' },
{ value: 13, text: 'Number of overdue actions arising out of audit reports (Max. 5)' },
{ value: 14, text: 'Number of changes not carried out as per change control procedure (Max. 1)' }
],
renderItem: function (item) {
return '<div class="my-multi-lines-item"><span class="my-multi-lines-text">' +
item.display + '</span></div>';
},
touchUi:
});
css.my-multi-lines-item {
font-size: 14px;
white-space: initial;
display: flex;
height: 60px;
line-height: normal;
}
.my-multi-lines-text {
margin-top: auto;
margin-bottom: auto;
}