Multiline select

Sometimes, the items of the select can get very long and they won't fit a single line. For those cases you can use the custom item templating and itemHeight to solve the rendering problems.

Get started with this example

Demo

Javascript jQuery Angular React Vue 
<script setup>
const myData = [
  { 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)' }
]
</script>
<template>
  <MbscSelect
    :data="myData"
    :itemHeight="60"
    :maxWidth="400"
    :touchUi=""
  >
    <template #item="item">
      <div class="my-multi-lines-item"><span class="my-multi-lines-text">{{ item.display }}</span></div>
    </template>
  </MbscSelect>
</template>
<style>
.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;
}
</style>
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.