Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16914

    My client’s site is already online – http://arnikaprojekt-hof.de – everything worked fine. Two problems stay:

    1) On Mobile Portrait View the #commentform label (position: absolute / left:245 px) disappears on the right side of the display.

    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.

    Thanks a lot. Bernd

    #93362

    Hi,

    Please add this to quick css in the backend of the theme :

    #commentform label {left: 2px; top: -25px}
    #commentform p {padding: 0 0 40px 0}

    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

    @media only screen and (max-width: 479px) {
    #commentform label {left: 2px; top: -25px}
    #commentform p {padding: 0 0 40px 0}
    }

    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

    $this->elements_html .= "<p class='".$p_class."' id='element_$id'>";
    $this->elements_html .= ' <input name="'.$id.'" class="text_input '.$element_class.'" type="text" id="'.$id.'" value="'.$value.'"/><label for="'.$id.'">'.$element['label'].$required.'</label>';
    $this->elements_html .= "</p>";

    and replace them with this block:

    $this->elements_html .= '<label for="'.$id.'">'.$required." ".$element['label'].'</label>';
    $this->elements_html .= "<p class='".$p_class."' id='element_$id'>";
    $this->elements_html .= ' <input name="'.$id.'" class="text_input '.$element_class.'" type="text" id="'.$id.'" value="'.$value.'"/>';
    $this->elements_html .= "</p>";

    Also please add the block below to Quick CSS

    .ajax_form .textare_label {
    top: -20px;
    left: 0%;
    margin-left: 0px;
    }
    .ajax_form p {
    padding: 0 0 20px 0;
    }

    Let us know if it worked out as you needed.

    Thanks,

    Nick

    #93363

    Hi Nick,

    that’s great. I told you two and a half issues and you solved three.

    1) Commentform: I took your first solution for all displays with margin-top:40px for #respond and added padding-bottom:10px for #commentform label.

    2) Contact form: The modification of class-form-generator.php works fine. I added margin-top:24px; for .ajax_form .text_area

    Thanks a lot. BR Bernd

    #93364

    Hi,

    Glad it worked out!

    Nick

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Commentform and ajax_form Labels on Mobile Portrait View’ is closed to new replies.