Hi Can i ask how can i make the textbox to full widththe following is my reference url Get dial code and phone number from International Telephone Input using jQuerylt Page Language34VB34 AutoEventWireup34false34 CodeFile34PhoneNumberaspxvb34 Inherits34toolsPhoneNumber34 gtltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtInternational Telephone Input With Flags and Dial Codeslttitlegt ltmeta name34viewport34 content34widt

Hi counterkinYou need to set the iti class and the TextBox width to 100Refer below codeHTMLltdiv class34containerfluid34gt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltstyle type34textcss34gt boxsizing borderbox header border 1px solid red padding 15px rowafter content 3434 clear both display table class34col34 float left padding 15px border 1px solid red col1 width 833 col2 width 1666 col3 width 25 col4 width 3333 col5 width 4166 col6 width 50 col7 width 5833 col8 width 6666 col9 width 75 col10 width 8333 col11 width 9166 col12 width 100 iti width 100 important txt

Set jQuery International Telephone Input plugin TextBox width in CSS

counterk...

SOLVED CLOSED ACTIVE ANSWERED
User: counterkin
Posted: on Jul 08, 2024 11:07 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2527

Hi, Can i ask how can i make the textbox to full width?

the following is my reference url: Get dial code and phone number from International Telephone Input using jQuery

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="PhoneNumber.aspx.vb" Inherits="tools_PhoneNumber" %>

<!DOCTYPE html>
<html>
<head>
    <title>International Telephone Input With Flags and Dial Codes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var code = "+60123884208"; // Assigning value from model.
            $('#txt_mobile').val(code);
            $('#txt_mobile').intlTelInput({
                autoHideDialCode: true,
                autoPlaceholder: "ON",
                dropdownContainer: document.body,
                formatOnDisplay: true,
                hiddenInput: "full_number",
                initialCountry: "auto",
                nationalMode: true,
                placeholderNumberType: "MOBILE",
                preferredCountries: ['MY'],
                separateDialCode: true
            });
            $('#btnSubmit').on('click', function () {
                var code = $("#txt_mobile").intlTelInput("getSelectedCountryData").dialCode;
                var phoneNumber = $('#txt_mobile').val();
                var name = $("#txt_mobile").intlTelInput("getSelectedCountryData").name;
                alert('Country Code : ' + code + '\nPhone Number : ' + phoneNumber + '\nCountry Name : ' + name);
            });
        });
    </script>
</head>
<body>
    <form runat="server">
        <div class="row">
            <div class="col-12">
                <asp:TextBox ID="txt_mobile" runat="server"></asp:TextBox>
            </div>
        </div>
    </form>
</body>
</html>

dharmend...

1 1

Reply
ANSWER
User: dharmendr
Replied: on Jul 08, 2024 11:36 PM
Report

Hi counterkin,

You need to set the iti class and the TextBox width to 100%.

Refer below code.

HTML

<div class="container-fluid">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <style type="text/css">
        * { box-sizing: border-box; }
        .header { border: 1px solid red; padding: 15px; }
        .row::after { content: ""; clear: both; display: table; }
        [class*="col-"] { float: left; padding: 15px; border: 1px solid red; }
        .col-1 { width: 8.33%; }
        .col-2 { width: 16.66%; }
        .col-3 { width: 25%; }
        .col-4 { width: 33.33%; }
        .col-5 { width: 41.66%; }
        .col-6 { width: 50%; }
        .col-7 { width: 58.33%; }
        .col-8 { width: 66.66%; }
        .col-9 { width: 75%; }
        .col-10 { width: 83.33%; }
        .col-11 { width: 91.66%; }
        .col-12 { width: 100%; }
        .iti { width: 100% !important; }
        #txt_mobile { width: 100% !important; }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var code = "+60123884208"; // Assigning value from model.
            $('#txt_mobile').val(code);
            $('#txt_mobile').intlTelInput({
                autoHideDialCode: true,
                autoPlaceholder: "ON",
                dropdownContainer: document.body,
                formatOnDisplay: true,
                hiddenInput: "full_number",
                initialCountry: "auto",
                nationalMode: true,
                placeholderNumberType: "MOBILE",
                preferredCountries: ['MY'],
                separateDialCode: true
            });
        });
    </script>
    <div class="row">
        <div class="col-12">
            <input id="txt_mobile" type="text" name="txt_mobile" />
        </div>
    </div>
</div>

Demo

Set jQuery International Telephone Input plugin TextBox width in CSS

Company

Explore

Follow us

Contact Us