Floating form buttons

skins/elastic/styles/widgets/forms.less

@@ -45,6 +45,25 @@ html.ms .propform {
     }
 }
 
+
+.formcontainer {
+    display: flex;
+    flex-direction: column;
+    justify-content:flex-start;
+    overflow-y: hidden !important;
+    height: 100%;
+
+    .formcontent {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .formbuttons {
+        padding: 0.5rem 1rem;
+    }
+}
+
+
 .formcontent {
     padding: 1em;
 
@@ -84,10 +103,6 @@ html.ms .propform {
     }
 }
 
-.formbuttons {
-    padding: 0 1em 1em 1em;
-}
-
 
 /* Some common icons for "iconized inputs" */
 .input-group-addon.icon {

skins/elastic/templates/compose.html

@@ -101,8 +101,10 @@
 			<roundcube:button command="close" type="link" class="button closewin disabled" classAct="button closewin"
 				label="cancel" condition="env:extwin" tabindex="2" innerclass="inner" />
 			<span class="spacer"></span>
+<!--
 			<roundcube:button command="send" type="link" class="button send disabled" classAct="button send"
 				label="send" title="sendmessage" tabindex="2" innerclass="inner" data-content-button="true" />
+-->
 			<roundcube:button command="savedraft" type="link" class="button save draft disabled" classAct="button save draft"
 				label="save" title="savemessage" tabindex="2" innerclass="inner" />
 			<span class="spacer"></span>
@@ -130,8 +132,8 @@
 			<roundcube:container name="toolbar" id="compose-toolbar" />
 		</div>
 	</div>
-	<div id="compose-content" class="scroller formcontent">
+	<div id="compose-content" class="formcontainer content">
-		<roundcube:object name="composeFormHead" role="main" />
+		<roundcube:object name="composeFormHead" role="main" class="formcontent" />
 		<!-- message headers -->
 		<div id="compose-headers" role="region" aria-labelledby="aria-label-composeheaders">
 			<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
@@ -204,6 +206,9 @@
 			<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
 		</div>
 		</form>
+		<div class="formbuttons">
+			<roundcube:button command="send" class="btn btn-primary send" label="send" tabindex="1" data-content-button="true" />
+		</div>
 	</div>
 </div>
 

skins/elastic/templates/contactedit.html

@@ -9,7 +9,6 @@
 			<roundcube:object name="sourceselector" id="sourceselect" condition="env:action=='add'" />
 		</div>
 	<roundcube:endif />
-
 	<fieldset id="contactphoto">
 		<legend class="voice"><roundcube:label name="contactphoto" /></legend>
 		<roundcube:object name="contactphoto" id="contactpic" class="image-upload" placeholder="/images/contactpic.png" />
@@ -17,7 +16,6 @@
 			<roundcube:object name="fileDropArea" id="contactpic" />
 		<roundcube:endif />
 	</fieldset>
-
 	<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
 	<br style="clear:both">
 	<div id="contacttabs" class="tabbed">

skins/elastic/ui.js

@@ -244,6 +244,16 @@ function rcube_elastic_ui()
             var parent = $(this).parent('li');
             $(parent.length ? parent : this).addClass('hidden-small');
         });
+
+        // Assign .formcontainer class to the iframe body, when it
+        // contains .formcontent and .formbuttons.
+        if (is_framed) {
+            $('.formcontent').each(function() {
+                if ($(this).next('.formbuttons').length) {
+                    $(this).parent().addClass('formcontainer');
+                }
+            });
+        }
     };
 
     /**