From 70a775b3cfa46d79e7b18fb6635c26b330dd38e4 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <rudolfkoenig@2b470e98-0d58-463d-a4d8-8e2adae1ed80>
Date: Sun, 10 Feb 2013 18:07:53 +0000
Subject: [PATCH] Add scrolling to the default-style menu

git-svn-id: https://fhem.svn.sourceforge.net/svnroot/fhem/trunk/fhem@2682 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 FHEM/01_FHEMWEB.pm | 35 ++++++++++++++++++++---------------
 www/pgm2/style.css | 12 ++++++++----
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/FHEM/01_FHEMWEB.pm b/FHEM/01_FHEMWEB.pm
index 6112a35ec..666134b7f 100755
--- a/FHEM/01_FHEMWEB.pm
+++ b/FHEM/01_FHEMWEB.pm
@@ -929,6 +929,7 @@ FW_roomOverview($)
 
   ##############
   # LOGO
+  my $hasMenuScroll;
   if($FW_detail && $FW_ss) {
     $FW_room = AttrVal($FW_detail, "room", undef);
     $FW_room = $1 if($FW_room && $FW_room =~ m/^([^,]*),/);
@@ -939,25 +940,13 @@ FW_roomOverview($)
     return;
 
   } else {
-    FW_pH "", "<div id=\"logo\"></div>";
+    $hasMenuScroll = 1;
+    FW_pO '<div id="menuScrollArea">';
+    FW_pH "", '<div id="logo"></div>';
 
   }
 
 
-  ##############
-  # HEADER
-  FW_pO "<div id=\"hdr\">";
-  FW_pO '<table border="0"><tr><td style="padding:0">';
-  FW_pO "<form method=\"get\" action=\"$FW_ME\">";
-  FW_pO FW_hidden("room", "$FW_room") if($FW_room);
-  FW_pO FW_textfield("cmd", $FW_ss ? 25 : 40, "maininput");
-  if(!$FW_ss && !$FW_hiddenroom{save}) {
-    FW_pO "</form></td><td><form>" . FW_submit("cmd", "save");
-  }
-  FW_pO "</form>";
-  FW_pO "</td></tr></table>";
-  FW_pO "</div>";
-
   ##############
   # MENU
   my (@list1, @list2);
@@ -1060,6 +1049,22 @@ FW_roomOverview($)
   }
   FW_pO "</table>";
   FW_pO "</div>";
+  FW_pO "</div>" if($hasMenuScroll);
+
+  ##############
+  # HEADER
+  FW_pO "<div id=\"hdr\">";
+  FW_pO '<table border="0"><tr><td style="padding:0">';
+  FW_pO "<form method=\"get\" action=\"$FW_ME\">";
+  FW_pO FW_hidden("room", "$FW_room") if($FW_room);
+  FW_pO FW_textfield("cmd", $FW_ss ? 25 : 40, "maininput");
+  if(!$FW_ss && !$FW_hiddenroom{save}) {
+    FW_pO "</form></td><td><form>" . FW_submit("cmd", "save");
+  }
+  FW_pO "</form>";
+  FW_pO "</td></tr></table>";
+  FW_pO "</div>";
+
 }
 
 
diff --git a/www/pgm2/style.css b/www/pgm2/style.css
index 93abb749a..f679fc92a 100644
--- a/www/pgm2/style.css
+++ b/www/pgm2/style.css
@@ -3,13 +3,17 @@ body     { background-color: #FFFFE7;
 input    { font-family:Arial, sans-serif; font-size:16px; }
 select   { font-family:Arial, sans-serif; font-size:16px; }
 
-#logo    { position:fixed; top:10px; left:20px;
-            width:120px;  height:132px; background-image:url(../icons/fhemicon.png); }
-#menu    { position:fixed; top:152px;left:20px; width:140px; }
+#logo    { margin-top:10px; margin-left:20px; width:120px; height:132px;
+           background-image:url(../icons/fhemicon.png); }
+#menu    { margin-top:10px; margin-left:20px; width:140px; }
+#menuScrollArea { width: 175px; left:0px; top:0px; height:100%; 
+                  position:fixed; overflow-x:hidden; overflow-y:auto; } 
+
 #hdr     { position:absolute; top:10px; left:180px; }
 #content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
 
-#connect_err { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }
+#connect_err { background-color: #000000; color: #FFFFFF; 
+               position:absolute; top:0px; left:40px; z-index: 10; }
 .devType { padding-top:20px; }
 a {  color: #278727; }
 img {  border-style: none; }