Moving html between divs without disturbing bottom div in Wordpress form generated code

Question

I have some WP Members plugin-generated html that I can't change, and am having trouble styling.

<div class="button_div">
    <input name="rememberme" type="checkbox" id="rememberme" value="forever">
        "&nbsp;Remember Me&nbsp;&nbsp;"
    <input type="submit" name="submit" value="LogIn" class="buttons">
</div>

I need to move the first input checkbox and the "Remember Me" text to the left, but can only target the checkbox alone, or the entire button_div with Sass/CSS. Is there a way with Javascript or some other technique to move the checkbox and Remember Me text without moving the submit button?

probably there is a typo. There should be a " in id attribute like id="rememberme". Also where do you want to keep the submit button?Do you want to want to have both these inputs in one line or one above another?Also will both of these input need to be left alinged? — brk, Dec 23 '15 at 03:04

score 1 · Accepted Answer · edited May 23 '17 at 11:44

I have updated my answer since you are unable to edit the original HTML. My proposed solution uses javascript to overwrite the original HTML with something that you can style to your needs.

Try this:

<!-- Your original HTML. -->

<div class="button_div">
  <input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;"
  <input type="submit" name="submit" value="LogIn" class="buttons">
</div>

<!-- A script that replaces the button_div contents with HTML that you should be able to work with. -->
<script>
  divs = document.getElementsByClassName('button_div');

  [].slice.call(divs).forEach(function(div) {
    div.innerHTML = '<div id="container"><div class="checkbox_div"><input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;"</div><div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons"></div></div>';
  });
</script>

<!-- An example of how you might style your elements. -->
<style type="text/css">
  .checkbox_div {
    position: relative;
    top: 100px;
    left: 100px;
  }
  .button_div {
    position: relative;
    left: 20px;
  }

Hope this helps.

*update: I wanted to be clear about how this works--as this can look a bit cryptic--for future viewers of this post. (understanding that this is just 1 example of how to solve this problem.)

First we get an array-like object from getElementsByClassName(class), assigning it to divs.
Next we create an array ([] is just shorthand for a new array) from divs so that we can loop through with forEach. (We have to do this because getElementsByClassName() returns an "array-like" object and not an actual array. i.e., there is no forEach method available to divs.)
For each element in the new array, we update the HTML.

Here are some other references:

I updated my answer to provide a potential javascript solution. See if that works for you. Effectively this solution just overwrites the html in the button_div class, so that you can work with it. Hope this helps. — Jason Elwood, Dec 24 '15 at 00:32
That's the coolest response I've gotten on S/O, I had no idea you could do that with JS. Fixed everything, thanks! — Virge Assault, Dec 24 '15 at 23:07

score 0 · Answer 2 · answered Dec 23 '15 at 03:14

The correct way to build this is by wrapping the text in a label you can target with a class or . button_div input[type="checkbox"] + label but I'm assuming you are not able to change the HTML. So my only hack to this solution is to float the input to the left and the button to the right or position the button relative and right as many px as needed. Use media queries to re-adjust. This is my solutions with a float on the button.

  .button_div{
      color:red;
      position:relative;
      left:-20px;
      right:auto;
      width:600px;
  }

  .btn{
     float:right;
  }

See my DEMO here

score 0 · Answer 3 · answered Dec 23 '15 at 03:38

First there is a typo in id attribute.It should be id="rememberme" Secondly it is better to use label-attribute when we are using input type="radio/checkbox" . So I have modified tour code like this

HTML Button & input is same line

<div class="button_div">
<input name="rememberme" type="checkbox" class="pull-left" id="rememberme" value="forever"><label for ="rememberme">Remember Me</label>
<input type="submit" class="pull-right" name="submit" value="LogIn" class="buttons">
</div>

In different lines

<div class="wrapper">
<div class="button_div">
<input name="rememberme" type="checkbox" class="pull-left" id="rememberme" value="forever"><label for ="rememberme">Remember Me</label>
</div>
<div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons">
</div> 
</div>

CSS

.button_div{
  width:500px;
  background:green;
  padding:10px;
}
.pull-left{
  float:left;
}
.pull-right{
  float:right;
}

WORKING DEMO

Moving html between divs without disturbing bottom div in Wordpress form generated code

3 Answers3