I want to add some extra spaces to my password form in the login form after the fa-eye icon because it's looks too overhang at the right.

I've tried to use some padding in the fontawesome-all.css but it doesn't work. Here is my code: login.xml

    <template id="inherit_login_layout" inherit_id="web.login">
        <xpath expr="//div[@class='form-group field-password']" position="replace">
            <div >
                <label for="password">Password</label>
                <input type="password" placeholder="Password" name="password" id="password" t-attf- required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                <span toggle="#main-password-field" ></span>
            </div>
        </xpath>
    </template>

fontawesome-all.css

.fa-eye: before {
  position: absolute;
  color: #000;
  top: 28%;
  right: 4%;
}

By the way, I'm using Odoo 15 web module.

Any help would be very appreciated. Thanks.

CodePudding user response：

Padding would not work since the pseudo element, eye, has an position absolute ,thus margin and padding would not work i would suggest: `

<div >
       <label for="password">Password</label>
       <div >

                <input type="password" placeholder="Password" name="password" id="password" t-attf- required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                <span toggle="#main-password-field" ></span>
       </div>
</div>


.input-div{
width:100%;
position:relative;
}
    .fa-eye {
      position: absolute;
      color: #000;
      top: 28%;
      right: 15px;
    }
//try removing ::before or adding double Colin before before text 

`

CodePudding user response：

First, be sure that the wrapper has position: relative property. Then, just play with right positioning of pseudo element.

.field-password {
    position: relative;
}

.fa-eye::before {
    position: absolute;
    color: #000;
    top: 28%;
    right: 4%;
}