0
304
ViewsInitTelInput: ¿cómo configurar el relleno correcto a la izquierda en la entrada?
Uso InitTelInput en mi proyecto.
Si inicio esta biblioteca, todo funciona bien.
<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
Pero si agrego relleno para .iti__flag-container, el selector de país se superpone a la entrada.
.iti__flag-container { padding: 16px; }https://codepen.io/ivstepin/pen/NWgbRLB?editors=1111
¿Cómo hacer el relleno correcto para la entrada?
·
Juan Pablo Isaza
1 answers
Answer question0
Use este css para diseñar correctamente la entrada
.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; }Puede verificar esto en acción aquí en codepane
·
Juan Pablo Isaza
Report
Answer question