CODEWITHSUNDEEP
htmlcssposition
J-Roel
J-Roel

Reputation: 520

How to remove extra space from relative position adding height?

I have a hover that allows the user to change from show/hide on a password type input:

<label for="Password">Create a Password</label>
@Html.PasswordFor(m => m.Password)
<span class="input-hover password-show">SHOW</span>
<div class="validation-rules"></div>
<label for="ConfirmPassword">Confirm Password</label>
@Html.PasswordFor(m => m.ConfirmPassword);
<span class="input-hover confirmpassword-show">SHOW</span>


input + .input-hover{
    position: relative;
    display: inline-block;
    height: 46px;
    width: 50px;
    top: -46px;
    left: calc(100% - 70px);
    line-height: 46px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #B2B4B2;
    font-weight: bold;
    text-align: right;
    z-index: 10;
}

This adds the 46px to the flow. So the elements between my input and the next label has 46px of height... even though my element sets top: -46px;

I cannot use absolute because I want it to be relative to the current input and not to the grandparent container (must be responsive and allow for adding/removing DOM elements... the validation rules.).

margin: -46px; pulls the height back to normal... sort of. It seems to mess up the left calc.

I can tweak it make the word fit right, but why is it moving it to the left when you set margin: -46px; ? it does not make any sense. Any idea how to do this correctly?

Here's a fiddle to see what I have: FIDDLE

Thanks!

Upvotes: 0

Views: 30

Answers (1)

Nathaniel Rink
Nathaniel Rink

Reputation: 513

I think when you set margin: -46px you are setting all the margins. So you're getting the margin-top: -46px that you're intending but you're also getting margin-left: -46px.

It worked for me when I set only the bottom margin:

margin: 0 0 -46px 0;

or: margin-left: -46px

PS. I think you're also getting additional space because your display is inline-block. If you set it to display: block with margin-top: -46px; you can have it flush with the bottom of the div.

Upvotes: 1

Related Questions