Creating a smaller version of select component

Packages/ohif-design/styles/common/global.styl

@@ -41,6 +41,19 @@ label.form-group
       span.select2-selection__arrow
           height: 34px
 
+.select-small+span.select2.select2-container span.select2-selection
+  height: 20px
+
+  span.select2-selection__rendered
+    height: 20px
+    line-height: 20px
+    padding-left: 4px
+    padding-right: 12px
+
+  span.select2-selection__arrow
+    height: 20px
+    width: 12px
+
 .center-table
   display: table
   margin-left: auto

Packages/ohif-study-list/client/components/studylist/studylistPagination/studylistPagination.html

@@ -1,29 +1,20 @@
 <template name="studylistPagination">
-        <div class="studylistPagination">
-            <div class="row">
-                <div class="col-xs-4 col-sm-3 col-md-3">
-                    {{#with recordCount}}
-                         <div class="form-inline form-group rows-per-page">
-                            <label>
-                                <span>Show</span>
-                                <select class="js-select-rows-per-page">
-                                    {{#each pageSize in pageSizes}}
-                                        <option value={{pageSize}} selected={{#if (isRowsPerPageSelected pageSize)}}selected{{/if}}>{{pageSize}}</option>
-                                    {{/each}}
-                                </select>
-
-                                <span class="rows-per-page-label">rows per page</span>
-                            </label>
-                        </div>
-                    {{/with}}
+    {{#form class='studylistPagination' schema=instance.schema}}
+        <div class="row">
+            <div class="col-xs-4 col-sm-3 col-md-3">
+                 <div class="form-inline form-group rows-per-page">
+                    <span>Show</span>
+                    {{>inputSelect class='select-small js-select-rows-per-page' key='rowsPerPage' hideSearch=true}}
+                    <span>rows per page</span>
                 </div>
-                <div class="col-xs-8 col-sm-9 col-md-9">
-                    <div class="form-inline form-group page-number">
-                        <label>
-                            <ul id="pagination" class="no-margins"></ul>
-                        </label>
-                    </div>
+            </div>
+            <div class="col-xs-8 col-sm-9 col-md-9">
+                <div class="form-inline form-group page-number">
+                    <label>
+                        <ul class="pagination-control no-margins"></ul>
+                    </label>
                 </div>
             </div>
         </div>
-</template>
+    {{/form}}
+</template>

Packages/ohif-study-list/client/components/studylist/studylistPagination/studylistPagination.js

@@ -1,4 +1,5 @@
 import { Template } from 'meteor/templating';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
 import './studylistPagination.html';
 
@@ -8,11 +9,18 @@ Template.studylistPagination.onCreated(function() {
     const instance = Template.instance();
     // replace parentVariable with the name of the instance variable
     instance.parent = this.parent(1);
+    instance.schema = new SimpleSchema({
+        rowsPerPage: {
+            type: Number,
+            allowedValues: [25, 50, 100],
+            defaultValue: 25
+        }
+    });
 });
 
 Template.studylistPagination.onRendered(() => {
     const instance = Template.instance();
-    const $paginationControl = instance.$('#pagination');
+    const $paginationControl = instance.$('.pagination-control');
 
     // Track changes on recordCount and rowsPerPage
     instance.autorun(() => {
@@ -43,13 +51,11 @@ Template.studylistPagination.onRendered(() => {
 });
 
 Template.studylistPagination.helpers({
-    pageSizes() {
-        return [ 25, 50, 100 ];
-    },
     recordCount() {
         const instance = Template.instance();
         return instance.parent.recordCount.get();
     },
+
     isRowsPerPageSelected(rowsPerPage) {
         const instance = Template.instance();
         return rowsPerPage === instance.parent.rowsPerPage.get();

Packages/ohif-study-list/client/components/studylist/studylistPagination/studylistPagination.styl

@@ -11,6 +11,13 @@
       theme('background-color', '$primaryBackgroundColor')
       color: white
 
+  .rows-per-page label.wrapperLabel
+    display: inline-table !important
+    margin: 0 4px
+
+    select
+      width: 42px
+
   .page-number
     margin: 0
     text-align: right
@@ -18,7 +25,7 @@
     label
       font-weight: normal
 
-      ul#pagination
+      ul.pagination-control
         margin: 0
 
         li
@@ -38,7 +45,7 @@
             theme('background-color', '$uiGray')
             border-color: #ddd
             color: white
-            
+
         .disabled
           a:hover
             color: inherit
@@ -56,4 +63,4 @@
 
 @media only screen and (max-width: 1069px)
   .studylistPagination > .row
-    margin-right: 0;
+    margin-right: 0;