Added scaling and truncating to the bar with poll buttons with answers

bigbluebutton-html5/app/client/globals.coffee

@@ -178,6 +178,12 @@ Handlebars.registerHelper 'whiteboardSize', (section) ->
 Handlebars.registerHelper "getPollQuestions", ->
   polls = BBB.getCurrentPoll(getInSession('userId'))
   if polls? and polls isnt undefined
+    number = polls.poll_info.poll.answers.length
+    widthStyle = "width: calc(75%/" + number + ");"
+    marginStyle = "margin-left: calc(25%/" + (number*2) + ");" + "margin-right: calc(23%/" + (number*2) + ");"
+    buttonStyle = widthStyle + marginStyle
+    for answer in polls.poll_info.poll.answers
+      answer.style = buttonStyle
     return polls.poll_info.poll.answers
 
 @getSortedUserList = (users) ->

bigbluebutton-html5/app/client/stylesheets/whiteboard.less

@@ -102,6 +102,7 @@
   padding-top:10px;
   padding-bottom:10px;
   border-top: 1px solid extract(@lightGrey, 3);
+  font-size: 0; /* to remove default 4px gaps between the buttons caused by display: inline-block */
 }
 
 .pollButtons {
@@ -110,9 +111,17 @@
   font-weight: bold;
   border: 1px solid extract(@lightGrey, 3);
   height: 100%;
-  margin: 0 1rem 0 1rem;
+  padding-left: 0rem !important;  /*overwriting the default foundation padding */
-  padding: auto;
+  padding-right: 0rem !important; /*overwriting the default foundation padding */
-  
+  max-width: calc(~'100%/6');     /* the actual width and margins are calculated in the code */
+  /* truncating the text inside the buttons */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* the end of truncating */
+  span {
+    max-width: 80%;
+  }
   &:hover {
     background: #3A82D4;
   }

bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html

@@ -18,7 +18,7 @@
     {{#if isPollStarted}}
       <div class="polling">
         {{#each getPollQuestions}}
-          {{> makeButton btn_class="pollButtons" rel="tooltip" data_placement="top" label=key answer=id}}
+          {{> makeButton btn_class="pollButtons" rel="tooltip" data_placement="top" label=key answer=id style=style }}
         {{/each}}
       </div>
     {{/if}}