GUAC-1052: Migrate to flexbox layout for menu.

guacamole/src/main/webapp/app/client/styles/menu.css

@@ -38,16 +38,45 @@
 }
 
 .menu-content {
-    overflow: hidden;
-    display: table;
-    table-layout: fixed;
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: column;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    
     width: 100%;
     height: 100%;
+
 }
 
 .menu-header {
-    display: table-row;
-    height: 0;
+
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+
 }
 
 .menu-header h2 {
@@ -55,23 +84,15 @@
 }
 
 .menu-body {
-    display: table-row;
-    height: 100%;
-}
 
-.menu-body-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
+    -ms-flex: 0 1 auto;
+    -moz-box-flex: 1;
+    -webkit-box-flex: 1;
+    -webkit-flex: 0 1 auto;
+    flex: 0 1 auto;
 
-.menu-body-scroll-region {
     overflow: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+
 }
 
 #menu h3 {

guacamole/src/main/webapp/app/client/templates/client.html

@@ -64,86 +64,82 @@
             </div>
 
             <!-- Scrollable body -->
-            <div class="menu-body">
-                <div class="menu-body-content">
-                    <div class="menu-body-scroll-region" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
+            <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
 
-                        <!-- Clipboard -->
-                        <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
-                        <div class="content" id="clipboard-settings">
-                            <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
-                            <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
-                        </div>
-
-                        <!-- File transfers -->
-                        <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
-                        <div class="content" id="file-transfers">
-                            <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
-                        </div>
-
-                        <!-- Input method -->
-                        <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
-                        <div class="content" id="keyboard-settings">
-
-                            <!-- No IME -->
-                            <div class="choice">
-                                <label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
-                                <p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
-                            </div>
-
-                            <!-- Text input -->
-                            <div class="choice">
-                                <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
-                                <label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
-                                <p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
-                            </div>
-
-                            <!-- Guac OSK -->
-                            <div class="choice">
-                                <label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
-                                <p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
-                            </div>
-
-                        </div>
-
-                        <!-- Mouse mode -->
-                        <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
-                        <div class="content" id="mouse-settings">
-                            <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
-
-                            <!-- Touchscreen -->
-                            <div class="choice">
-                                <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
-                                <div class="figure">
-                                    <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
-                                    <p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
-                                </div>
-                            </div>
-
-                            <!-- Touchpad -->
-                            <div class="choice">
-                                <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
-                                <div class="figure">
-                                    <label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
-                                    <p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
-                                </div>
-                            </div>
-
-                        </div>
-
-                        <!-- Display options -->
-                        <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
-                        <div class="content">
-                            <div id="zoom-settings">
-                                <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
-                                <div id="zoom-state">{{formattedScale()}}%</div>
-                                <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
-                            </div>
-                            <div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
-                        </div>
-
-                    </div>
+                <!-- Clipboard -->
+                <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
+                <div class="content" id="clipboard-settings">
+                    <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
+                    <textarea ng-model="client.clipboardData" rows="10" cols="40" id="clipboard"></textarea>
                 </div>
+
+                <!-- File transfers -->
+                <h3 guac-marker="menu.fileTransferMarker">{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}</h3>
+                <div class="content" id="file-transfers">
+                    <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
+                </div>
+
+                <!-- Input method -->
+                <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
+                <div class="content" id="keyboard-settings">
+
+                    <!-- No IME -->
+                    <div class="choice">
+                        <label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
+                        <p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
+                    </div>
+
+                    <!-- Text input -->
+                    <div class="choice">
+                        <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
+                        <label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
+                        <p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
+                    </div>
+
+                    <!-- Guac OSK -->
+                    <div class="choice">
+                        <label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
+                        <p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
+                    </div>
+
+                </div>
+
+                <!-- Mouse mode -->
+                <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
+                <div class="content" id="mouse-settings">
+                    <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>
+
+                    <!-- Touchscreen -->
+                    <div class="choice">
+                        <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
+                        <div class="figure">
+                            <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
+                            <p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
+                        </div>
+                    </div>
+
+                    <!-- Touchpad -->
+                    <div class="choice">
+                        <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
+                        <div class="figure">
+                            <label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
+                            <p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Display options -->
+                <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
+                <div class="content">
+                    <div id="zoom-settings">
+                        <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
+                        <div id="zoom-state">{{formattedScale()}}%</div>
+                        <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
+                    </div>
+                    <div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
+                </div>
+
             </div>
 
         </div>