http://www.kriesi.at/support/topic/commentform-and-ajax_form-labels-on-mobile-portrait-view Support Forum - Topic: Commentform and ajax_form Labels on Mobile Portrait View en-US Sat, 25 May 2013 09:14:30 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/commentform-and-ajax_form-labels-on-mobile-portrait-view#post-79956 Tue, 16 Oct 2012 12:11:09 +0000 Nick 79956@http://www.kriesi.at/support/ <p>Hi,</p> <p>Glad it worked out!</p> <p>Nick </p> http://www.kriesi.at/support/topic/commentform-and-ajax_form-labels-on-mobile-portrait-view#post-79930 Tue, 16 Oct 2012 08:13:46 +0000 profil77 79930@http://www.kriesi.at/support/ <p>Hi Nick,</p> <p>that's great. I told you two and a half issues and you solved three.</p> <p>1) Commentform: I took your first solution for all displays with margin-top:40px for #respond and added padding-bottom:10px for #commentform label.</p> <p>2) Contact form: The modification of class-form-generator.php works fine. I added margin-top:24px; for .ajax_form .text_area</p> <p>Thanks a lot. BR Bernd </p> http://www.kriesi.at/support/topic/commentform-and-ajax_form-labels-on-mobile-portrait-view#post-79217 Wed, 10 Oct 2012 10:52:46 +0000 Nick 79217@http://www.kriesi.at/support/ <p>Hi,</p> <p>Please add this to quick css in the backend of the theme :</p> <pre><code>#commentform label {left: 2px; top: -25px} #commentform p {padding: 0 0 40px 0}</code></pre> <p>The above takes care of the first issue, but affects all displays. If you only want to target the portrait mobile then instead use the css below<br /> <pre><code>@media only screen and (max-width: 479px) { #commentform label {left: 2px; top: -25px} #commentform p {padding: 0 0 40px 0} }</code></pre> <p>To change the contact form , please make a backup copy and then open class-form-generator.php in the /framework/php/ directory. Locate lines 155-157 which look like </p> <pre><code>$this-&gt;elements_html .= &quot;&lt;p class=&#39;&quot;.$p_class.&quot;&#39; id=&#39;element_$id&#39;&gt;&quot;; $this-&gt;elements_html .= &#39; &lt;input name=&quot;&#39;.$id.&#39;&quot; class=&quot;text_input &#39;.$element_class.&#39;&quot; type=&quot;text&quot; id=&quot;&#39;.$id.&#39;&quot; value=&quot;&#39;.$value.&#39;&quot;/&gt;&lt;label for=&quot;&#39;.$id.&#39;&quot;&gt;&#39;.$element[&#39;label&#39;].$required.&#39;&lt;/label&gt;&#39;; $this-&gt;elements_html .= &quot;&lt;/p&gt;&quot;;</code></pre> <p>and replace them with this block:<br /> <pre><code>$this-&gt;elements_html .= &#39;&lt;label for=&quot;&#39;.$id.&#39;&quot;&gt;&#39;.$required.&quot; &quot;.$element[&#39;label&#39;].&#39;&lt;/label&gt;&#39;; $this-&gt;elements_html .= &quot;&lt;p class=&#39;&quot;.$p_class.&quot;&#39; id=&#39;element_$id&#39;&gt;&quot;; $this-&gt;elements_html .= &#39; &lt;input name=&quot;&#39;.$id.&#39;&quot; class=&quot;text_input &#39;.$element_class.&#39;&quot; type=&quot;text&quot; id=&quot;&#39;.$id.&#39;&quot; value=&quot;&#39;.$value.&#39;&quot;/&gt;&#39;; $this-&gt;elements_html .= &quot;&lt;/p&gt;&quot;;</code></pre> <p>Also please add the block below to Quick CSS<br /> <pre><code>.ajax_form .textare_label { top: -20px; left: 0%; margin-left: 0px; } .ajax_form p { padding: 0 0 20px 0; }</code></pre> <p>Let us know if it worked out as you needed. </p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/commentform-and-ajax_form-labels-on-mobile-portrait-view#post-79008 Mon, 08 Oct 2012 18:13:36 +0000 profil77 79008@http://www.kriesi.at/support/ <p>My client's site is already online - <a href="http://arnikaprojekt-hof.de" rel="nofollow">http://arnikaprojekt-hof.de</a> - everything worked fine. Two problems stay:</p> <p>1) On Mobile Portrait View the #commentform label (position: absolute / left:245 px) disappears on the right side of the display.</p> <p>2) A similiar problem appears with the last label of our contact form (Ihre Nachricht). The first 5 lables are positioned under the formfield (why under?), the last one stays right of the textarea.</p> <p>Thanks a lot. Bernd </p>