search

Borales / yii2-phone-input

Yii2 International telephone numbers
Other
135 stars 55 forks source link

it does not look good with bootstrap #25

Closed michaelnguyen2021 closed 7 years ago

michaelnguyen2021 commented 7 years ago

it looks ugly with bootstrap, any suggestions to fix it ?

2017-03-30_1659

thanks

Borales commented 7 years ago

@michaelnguyen547 try to pass bootstrap-specific css class to this component

TonisOrmisson commented 7 years ago

had the same issue. Try adding to css: .intl-tel-input {width: 100%;} or .intl-tel-input,.intl-tel-input input {width: 100%}

michaelnguyen2021 commented 7 years ago

thanks @TonisOrmisson for the tip

for my case, i did

    .intl-tel-input,.intl-tel-input input {
        width: 100%;
    }

    .intl-tel-input input {
        padding: 6px 12px;
    }

and I also add class to input field so it shows proper format 

<? echo $form->field($model, 'primary_phone', ['options' => ['class' => 'col-md-3']])->widget(PhoneInput::className(), [
    'jsOptions' => [
        'preferredCountries' => ['no', 'pl', 'ua'],
    ],
    'defaultOptions' => [
        'class' => 'form-control'
    ]
]);
?>

phone

Thanks for this awesome plugin