0
309
ViewsInitTelInput — how to set correct padding left in input?
I use InitTelInput in my project.
If i init this lib all work good.
<input type="tel" class="form__tel-input" id="phone" placeholder="">
.form__tel-input {
position: relative;
width: 100%;
padding: 24.5px 24px 25.5px 126px;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 170%;
background: #EEEEEE;
border-radius: 10px;
}
$(() => {
$('#phone').intlTelInput({
hiddenInput: 'full_number',
initialCountry: 'auto',
geoIpLookup: function (callback) {
$.get('https://api.sypexgeo.net/json/', function (location) {
let countryCode = location.country.iso;
callback(countryCode);
})
},
separateDialCode: true,
});
})
https://codepen.io/ivstepin/pen/JjJbRrd?editors=1111
But if i add padding for .iti__flag-container then country selector overlaps input.
.iti__flag-container {
padding: 16px;
}
https://codepen.io/ivstepin/pen/NWgbRLB?editors=1111
How to make correct padding for input?
·
Juan Pablo Isaza
1 answers
Answer question0
Use this css to correctly style the input
.iti__flag-container {
margin: 16px;
position: relative;
}
.iti {
display: flex;
justify-content: center;
flex-direction: row;
border: 2px solid;
border-radius: 10px;
background: #EEEEEE;
}
.form__tel-input {
position: relative;
width: 100%;
padding: 24.5px 24px 25.5px 166px;
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 170%;
background: #EEEEEE;
border-radius: 10px;
padding-left: 0px !important;
border: 0px !important;
outline: none;
}
You can checkout this in action here in codepane
·
Juan Pablo Isaza
Report
Answer question