diff --git a/CountryPickerView/CountryPickerView.swift b/CountryPickerView/CountryPickerView.swift
index db64b23..6eef122 100644
--- a/CountryPickerView/CountryPickerView.swift
+++ b/CountryPickerView/CountryPickerView.swift
@@ -46,7 +46,8 @@ public class CountryPickerView: NibView {
         }
     }
     @IBOutlet public weak var countryDetailsLabel: UILabel!
-    
+    @IBOutlet public weak var containerView: UIView!
+
     /// Show/Hide the country code on the view.
     public var showCountryCodeInView = true {
         didSet {
diff --git a/CountryPickerView/Resources/CountryPickerView.xib b/CountryPickerView/Resources/CountryPickerView.xib
index cf5a25d..8eac2ce 100644
--- a/CountryPickerView/Resources/CountryPickerView.xib
+++ b/CountryPickerView/Resources/CountryPickerView.xib
@@ -1,34 +1,33 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12120" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="CountryPickerView" customModule="CountryPickerView" customModuleProvider="target">
             <connections>
+                <outlet property="containerView" destination="rOy-96-GKY" id="vuK-nN-Wbj"/>
                 <outlet property="countryDetailsLabel" destination="4Mf-hk-O6C" id="1Dv-CS-6Cf"/>
                 <outlet property="flagImageView" destination="0ui-wz-fhH" id="aWg-vy-G4b"/>
                 <outlet property="spacingConstraint" destination="f2R-wJ-cfm" id="lt5-i3-VM4"/>
             </connections>
         </placeholder>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
-        <view contentMode="scaleToFill" id="iN0-l3-epB">
-            <rect key="frame" x="0.0" y="0.0" width="346" height="94"/>
+        <view contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" id="iN0-l3-epB">
+            <rect key="frame" x="0.0" y="0.0" width="240" height="100"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
-                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rOy-96-GKY">
-                    <rect key="frame" x="0.0" y="0.0" width="346" height="94"/>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rOy-96-GKY" userLabel="Container View">
+                    <rect key="frame" x="0.0" y="0.0" width="240" height="100"/>
                     <subviews>
-                        <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="750" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="0ui-wz-fhH">
-                            <rect key="frame" x="0.0" y="0.5" width="256" height="94"/>
+                        <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="750" verticalCompressionResistancePriority="250" preservesSuperviewLayoutMargins="YES" translatesAutoresizingMaskIntoConstraints="NO" id="0ui-wz-fhH">
+                            <rect key="frame" x="0.0" y="0.0" width="150" height="100"/>
                         </imageView>
-                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="(NG) +234" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4Mf-hk-O6C">
-                            <rect key="frame" x="264" y="-0.5" width="82" height="94.5"/>
+                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalCompressionResistancePriority="1000" preservesSuperviewLayoutMargins="YES" text="(NG) +234" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4Mf-hk-O6C" userLabel="Label">
+                            <rect key="frame" x="158" y="0.0" width="82" height="100"/>
                             <fontDescription key="fontDescription" type="system" pointSize="17"/>
                             <nil key="textColor"/>
                             <nil key="highlightedColor"/>
@@ -37,14 +36,15 @@
                     <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                     <gestureRecognizers/>
                     <constraints>
-                        <constraint firstAttribute="trailing" secondItem="4Mf-hk-O6C" secondAttribute="trailing" id="GOz-D9-UZP"/>
-                        <constraint firstItem="4Mf-hk-O6C" firstAttribute="centerY" secondItem="rOy-96-GKY" secondAttribute="centerY" id="K0F-Oh-iPl"/>
-                        <constraint firstItem="0ui-wz-fhH" firstAttribute="leading" secondItem="rOy-96-GKY" secondAttribute="leading" id="R2F-Rd-8PH"/>
-                        <constraint firstItem="0ui-wz-fhH" firstAttribute="height" secondItem="rOy-96-GKY" secondAttribute="height" id="SEs-55-b9c"/>
-                        <constraint firstItem="0ui-wz-fhH" firstAttribute="centerY" secondItem="rOy-96-GKY" secondAttribute="centerY" id="bm9-la-i16"/>
+                        <constraint firstItem="4Mf-hk-O6C" firstAttribute="top" secondItem="rOy-96-GKY" secondAttribute="topMargin" id="4iS-ha-AIw"/>
+                        <constraint firstItem="4Mf-hk-O6C" firstAttribute="bottom" secondItem="rOy-96-GKY" secondAttribute="bottomMargin" id="AAr-31-Oia"/>
+                        <constraint firstAttribute="trailingMargin" secondItem="4Mf-hk-O6C" secondAttribute="trailing" id="GOz-D9-UZP"/>
+                        <constraint firstItem="0ui-wz-fhH" firstAttribute="leading" secondItem="rOy-96-GKY" secondAttribute="leadingMargin" id="R2F-Rd-8PH"/>
                         <constraint firstItem="4Mf-hk-O6C" firstAttribute="leading" secondItem="0ui-wz-fhH" secondAttribute="trailing" constant="8" id="f2R-wJ-cfm"/>
-                        <constraint firstItem="4Mf-hk-O6C" firstAttribute="height" secondItem="rOy-96-GKY" secondAttribute="height" id="grh-0A-Y04"/>
+                        <constraint firstItem="0ui-wz-fhH" firstAttribute="top" secondItem="rOy-96-GKY" secondAttribute="topMargin" id="iHC-Jg-SCG"/>
+                        <constraint firstItem="0ui-wz-fhH" firstAttribute="bottom" secondItem="rOy-96-GKY" secondAttribute="bottomMargin" id="tay-Kr-dy9"/>
                     </constraints>
+                    <edgeInsets key="layoutMargins" top="0.0" left="0.0" bottom="0.0" right="0.0"/>
                     <userDefinedRuntimeAttributes>
                         <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
                             <real key="value" value="2.5"/>
@@ -59,8 +59,8 @@
             <constraints>
                 <constraint firstItem="rOy-96-GKY" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="E1R-hS-pC2"/>
                 <constraint firstItem="rOy-96-GKY" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="Oqc-mn-3Os"/>
-                <constraint firstAttribute="trailing" secondItem="rOy-96-GKY" secondAttribute="trailing" id="ZpZ-dR-Udu"/>
-                <constraint firstAttribute="bottom" secondItem="rOy-96-GKY" secondAttribute="bottom" id="enE-wM-9mL"/>
+                <constraint firstItem="rOy-96-GKY" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="ZpZ-dR-Udu"/>
+                <constraint firstAttribute="bottom" secondItem="rOy-96-GKY" secondAttribute="bottom" id="yiG-11-J4U"/>
             </constraints>
             <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
             <point key="canvasLocation" x="-18" y="-599"/>
diff --git a/CountryPickerViewDemo/CountryPickerViewDemo/Base.lproj/Main.storyboard b/CountryPickerViewDemo/CountryPickerViewDemo/Base.lproj/Main.storyboard
index b96dafb..08e52eb 100644
--- a/CountryPickerViewDemo/CountryPickerViewDemo/Base.lproj/Main.storyboard
+++ b/CountryPickerViewDemo/CountryPickerViewDemo/Base.lproj/Main.storyboard
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="bHM-lk-FWb">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="bHM-lk-FWb">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -32,7 +32,7 @@
                     <tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="grouped" separatorStyle="none" allowsSelection="NO" rowHeight="44" sectionHeaderHeight="18" sectionFooterHeight="18" id="fNq-fM-LmU">
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
+                        <color key="backgroundColor" systemColor="groupTableViewBackgroundColor"/>
                         <sections>
                             <tableViewSection headerTitle="CUSTOMIZATION" id="40Z-Ay-ZrI">
                                 <cells>
@@ -107,7 +107,7 @@
                                             <autoresizingMask key="autoresizingMask"/>
                                             <subviews>
                                                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Show phone code in view" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Fga-9R-GVt">
-                                                    <rect key="frame" x="26" y="11" width="163" height="16"/>
+                                                    <rect key="frame" x="26" y="11" width="162" height="16"/>
                                                     <fontDescription key="fontDescription" type="boldSystem" pointSize="13"/>
                                                     <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                     <nil key="highlightedColor"/>
@@ -300,10 +300,10 @@
                                                     <nil key="highlightedColor"/>
                                                 </label>
                                                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="cFF-sE-QnX" customClass="CountryPickerView" customModule="CountryPickerView">
-                                                    <rect key="frame" x="115" y="30" width="145" height="30"/>
+                                                    <rect key="frame" x="115" y="30" width="145" height="40"/>
                                                     <constraints>
                                                         <constraint firstAttribute="width" constant="145" id="8n2-HY-BNq"/>
-                                                        <constraint firstAttribute="height" constant="30" id="KtA-Kd-L2H"/>
+                                                        <constraint firstAttribute="height" constant="40" id="KtA-Kd-L2H"/>
                                                     </constraints>
                                                 </view>
                                             </subviews>
@@ -333,10 +333,13 @@
                                                     <nil key="textColor"/>
                                                     <nil key="highlightedColor"/>
                                                 </label>
-                                                <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="jZa-H4-Kh6">
+                                                <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" semanticContentAttribute="forceLeftToRight" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="jZa-H4-Kh6">
                                                     <rect key="frame" x="26" y="48.5" width="323" height="34"/>
                                                     <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                                    <textInputTraits key="textInputTraits" spellCheckingType="no" keyboardType="numberPad" returnKeyType="done"/>
+                                                    <textInputTraits key="textInputTraits" spellCheckingType="no" keyboardType="numberPad" returnKeyType="done" textContentType="tel"/>
+                                                    <connections>
+                                                        <action selector="phoneNumberChanged:" destination="tnn-b2-c0d" eventType="editingChanged" id="zKq-e6-9fD"/>
+                                                    </connections>
                                                 </textField>
                                                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jW6-QQ-F9e">
                                                     <rect key="frame" x="0.0" y="89.5" width="375" height="0.5"/>
@@ -367,7 +370,7 @@
                                             <autoresizingMask key="autoresizingMask"/>
                                             <subviews>
                                                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="CountryPickerView can also be used as an independent view." textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="2" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1RQ-vo-NB4">
-                                                    <rect key="frame" x="26" y="10" width="323" height="33.5"/>
+                                                    <rect key="frame" x="18" y="10" width="339" height="33.5"/>
                                                     <fontDescription key="fontDescription" type="system" weight="light" pointSize="14"/>
                                                     <nil key="textColor"/>
                                                     <nil key="highlightedColor"/>
@@ -480,4 +483,9 @@
             <point key="canvasLocation" x="1418" y="537"/>
         </scene>
     </scenes>
+    <resources>
+        <systemColor name="groupTableViewBackgroundColor">
+            <color red="0.94901960784313721" green="0.94901960784313721" blue="0.96862745098039216" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+    </resources>
 </document>
diff --git a/CountryPickerViewDemo/CountryPickerViewDemo/DemoViewController.swift b/CountryPickerViewDemo/CountryPickerViewDemo/DemoViewController.swift
index 0c0119c..9eb06e3 100644
--- a/CountryPickerViewDemo/CountryPickerViewDemo/DemoViewController.swift
+++ b/CountryPickerViewDemo/CountryPickerViewDemo/DemoViewController.swift
@@ -32,10 +32,15 @@ class DemoViewController: UITableViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
        
-        let cp = CountryPickerView(frame: CGRect(x: 0, y: 0, width: 120, height: 20))
+        let cp = CountryPickerView(frame: .zero)
+        cp.translatesAutoresizingMaskIntoConstraints = false
+        cp.heightAnchor.constraint(equalToConstant: 34).isActive = true
+        cp.widthAnchor.constraint(equalToConstant: 120).isActive = true
+        cp.containerView.semanticContentAttribute = .forceLeftToRight
+        cp.containerView.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 0)
         phoneNumberField.leftView = cp
         phoneNumberField.leftViewMode = .always
-        self.cpvTextField = cp
+        cpvTextField = cp
 
         cpvMain.tag = 1
         cpvTextField.tag = 2
@@ -108,6 +113,9 @@ class DemoViewController: UITableViewController {
         present(alert, animated: true, completion: nil)
     }
 
+    @IBAction func phoneNumberChanged(_ sender: UITextField) {
+        sender.text = NSString(string: sender.text ?? "").applyingTransform(StringTransform.latinToArabic, reverse: true)
+    }
 }
 
 extension DemoViewController: CountryPickerViewDelegate {