overlapping divs on the right edge of the page

问题

I am having troubles for positioning a span with the watermark text on top of an input. The code using GWT+uibinder looks like that:

http://jsfiddle.net/camposcarlos/dMzL4/

and transformed into html looks like that:

http://jsfiddle.net/ajMWd/

instead of having the span overlapped on top of the input field by floating it to the left:

|----------------------------------|
|                |------------||--||
|                |passwd      ||Go||
|                |------------||--||
|                                  |
|----------------------------------|

I get it after the input

|----------------------------------|
|          |------------|      |--||
|          |            |passwd|Go||
|          |------------|      |--||
|                                  |
|----------------------------------|

or in the next line if I try to position the span relative to the width of the input

|----------------------------------|
|                |------------||--||
|                |            ||Go||
|                |------------||--||
|                 passwd           |
|----------------------------------|

Any ideas on how to solve it? Thanks in advance.

回答1:

Check this fiddle, it's using absolute positioning. http://jsfiddle.net/ajMWd/1/

edit Just another version doing the same thing http://jsfiddle.net/ajMWd/2/

回答2:

If your problem is now that you want to display default text in a password box, but the password default text is unreadable, you will need to change your password input to be a normal text input before the user enters data.

Than, in your JavaScript, you can use the focus event to change it back to being a password-type input.

Try something like this:

<head>
   <script type="text/javascript">
      function changeToPassword() {
         document.getElementById("passwordSpan")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("passwd").focus();
      }
   </script>
</head>
<body>
   <form>
      <span id="passwordSpan">
         <input onfocus="return changeToPassword()" id="passwd" name="passwd" type="text" value="Type Password" />
      </span>
   </form>
</body>

回答3:

I have been able to solve it using a nice solution from here. The trick was to tag the container with a relative position style and the passwordbox and its span with absolute tags. It works with no need of specifying any position! (although I haven't tried with IE yet) http://jsfiddle.net/ajMWd/4/

来源：https://stackoverflow.com/questions/10238265/overlapping-divs-on-the-right-edge-of-the-page

标签

html

css

gwt

uibinder