Почему в телефоне на сайте недоступны поля ввода?

Question

[TCHProgrammer]

Здравствуйте! На сайте в телефонах и смартфонах в Google Chrome в режиме "Версия для ПК" на одной из страниц не доступны поля input и select. У них нет флага disabled или readonly. Но они не открываются: select'ы не раскрываются, а в input-полях на форме ничего нельзя вписать. Сайт сделан на Yii2. В чём может быть причина?

Код:

<?php
        $block_show = $OrderCheckoutHelper->getBlockDisplay('giving_order_point_1_block');
    ?>
    <div class="row giving_order_point_1_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_1_block');?>;">
        <div class="col-sm-6">
            <?php echo $form->field($model, 'recipient_info[country_delivery]')
                ->dropDownList($countryOptions, ['prompt' => 'Страна', 'options' => $block_show == 'none' ? [] : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'country_delivery', '[recipient_info][country_delivery]',true)['options']])
                ->label(false); ?>
        </div>
        <div class="col-sm-6">
            <?php echo $form->field($model, 'recipient_info[region_delivery]')
                ->textInput(['placeholder' => 'Регион/область', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'region_delivery', '[recipient_info][region_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <div class="row giving_order_point_1_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_1_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'recipient_info[city_delivery]')
                ->textInput(['placeholder' => 'Город/Населенный пункт', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'city_delivery', '[recipient_info][city_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <?php
        $block_show = $OrderCheckoutHelper->getBlockDisplay('giving_order_point_2_block');
    ?>
    <div class="row giving_order_point_2_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_2_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'recipient_info[street_delivery]')
                ->textInput(['placeholder' => 'Улица', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'street_delivery', '[recipient_info][street_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <div class="row giving_order_point_2_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_2_block');?>;">
        <div class="col-sm-4">
            <?php echo $form->field($model, 'recipient_info[house_delivery]')
                ->textInput(['placeholder' => 'Дом', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'house_delivery', '[recipient_info][house_delivery]')['value']])
                ->label(false); ?>
        </div>
        <div class="col-sm-4">
            <?php echo $form->field($model, 'recipient_info[flat_delivery]')
                ->textInput(['placeholder' => 'Квартира', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'flat_delivery', '[recipient_info][flat_delivery]')['value']])
                ->label(false); ?>
        </div>
        <div class="col-sm-4">
            <?php echo $form->field($model, 'recipient_info[zip_delivery]')
                ->textInput(['placeholder' => 'Индекс', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'zip_delivery', '[recipient_info][zip_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <div class="row to_terminal_city_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('to_terminal_city_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'shipping_company_delivery_city')
            ->textinput(['placeholder' => 'Город', 'value' => $OrderCheckoutHelper->getActualFieldInfo('model', 'shipping_company_delivery_city')['value']])
            ->label(false); ?>
        </div>
    </div>


    <div class="row address_delivery_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('address_delivery_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'recipient_info[address_delivery]')
            ->textInput(['placeholder' => 'Пункт выдачи заказов', 'value' => $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'address_delivery', '[address_delivery]')['value']])
            ->label(false); ?>
        </div>
    </div>

Comments

[archelon]

не видя сайта, невозможно дать ответ.

Answer 1

[Игорь]

Предоставьте код, как понять причины если нет кода?

UDP: Ошибка была в том что были указаны только sm- классы, а соответственно все что ≥576px не отображалось как ожидается.

Comments

[TCHProgrammer]

Представляю код:

<?php
        $block_show = $OrderCheckoutHelper->getBlockDisplay('giving_order_point_1_block');
    ?>
    <div class="row giving_order_point_1_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_1_block');?>;">
        <div class="col-sm-6">
            <?php echo $form->field($model, 'recipient_info[country_delivery]')
                ->dropDownList($countryOptions, ['prompt' => 'Страна', 'options' => $block_show == 'none' ? [] : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'country_delivery', '[recipient_info][country_delivery]',true)['options']])
                ->label(false); ?>
        </div>
        <div class="col-sm-6">
            <?php echo $form->field($model, 'recipient_info[region_delivery]')
                ->textInput(['placeholder' => 'Регион/область', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'region_delivery', '[recipient_info][region_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <div class="row giving_order_point_1_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_1_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'recipient_info[city_delivery]')
                ->textInput(['placeholder' => 'Город/Населенный пункт', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'city_delivery', '[recipient_info][city_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <?php
        $block_show = $OrderCheckoutHelper->getBlockDisplay('giving_order_point_2_block');
    ?>
    <div class="row giving_order_point_2_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_2_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'recipient_info[street_delivery]')
                ->textInput(['placeholder' => 'Улица', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'street_delivery', '[recipient_info][street_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <div class="row giving_order_point_2_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('giving_order_point_2_block');?>;">
        <div class="col-sm-4">
            <?php echo $form->field($model, 'recipient_info[house_delivery]')
                ->textInput(['placeholder' => 'Дом', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'house_delivery', '[recipient_info][house_delivery]')['value']])
                ->label(false); ?>
        </div>
        <div class="col-sm-4">
            <?php echo $form->field($model, 'recipient_info[flat_delivery]')
                ->textInput(['placeholder' => 'Квартира', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'flat_delivery', '[recipient_info][flat_delivery]')['value']])
                ->label(false); ?>
        </div>
        <div class="col-sm-4">
            <?php echo $form->field($model, 'recipient_info[zip_delivery]')
                ->textInput(['placeholder' => 'Индекс', 'value' => $block_show == 'none' ? null : $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'zip_delivery', '[recipient_info][zip_delivery]')['value']])
                ->label(false); ?>
        </div>
    </div>

    <div class="row to_terminal_city_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('to_terminal_city_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'shipping_company_delivery_city')
            ->textinput(['placeholder' => 'Город', 'value' => $OrderCheckoutHelper->getActualFieldInfo('model', 'shipping_company_delivery_city')['value']])
            ->label(false); ?>
        </div>
    </div>


    <div class="row address_delivery_block" style="display: <?php echo $OrderCheckoutHelper->getBlockDisplay('address_delivery_block');?>;">
        <div class="col-sm-12">
            <?php echo $form->field($model, 'recipient_info[address_delivery]')
            ->textInput(['placeholder' => 'Пункт выдачи заказов', 'value' => $OrderCheckoutHelper->getActualFieldInfo('model', 'recipient_info', 'address_delivery', '[address_delivery]')['value']])
            ->label(false); ?>
        </div>
    </div>

[Игорь]

TCHProgrammer, У вас элементы показываются только для разрешений ≥576px. Так как вы собственно и указали class="col-sm-12", укажите без sm, например, class="col-12" и на всех экранах будет одинаково

[TCHProgrammer]

А вот html:

<div class="row shipping_company_delivery_to_block" style="display: block;">
        <div class="col-sm-12">
            <div class="form-group field-checkoutform-shipping_company_delivery_to">

<select id="checkoutform-shipping_company_delivery_to" class="form-control" name="CheckoutForm[shipping_company_delivery_to]" style="background-color: rgb(255, 255, 255);">
<option value="">Груз доставить до *</option>
<option value="1" selected="">До терминала ТК</option>
<option value="2">До адресата</option>
</select>

<div class="help-block"></div>
</div>        </div>
    </div>
<div class="row giving_order_point_1_block" style="display: block;">
        <div class="col-sm-6">
            <div class="form-group field-checkoutform-recipient_info-country_delivery">

<select id="checkoutform-recipient_info-country_delivery" class="form-control" name="CheckoutForm[recipient_info][country_delivery]">
<option value="">Страна</option>
<option value="Российская Федерация" selected="">Российская Федерация</option>
<option value="Азербайджан">Азербайджан</option>
<option value="Беларусь">Беларусь</option>
<option value="Казахстан">Казахстан</option>
<option value="Армения">Армения</option>
<option value="Молдавия">Молдавия</option>
<option value="Таджикистан">Таджикистан</option>
<option value="Узбекистан">Узбекистан</option>
<option value="Киргизия">Киргизия</option>
</select>

<div class="help-block"></div>
</div>        </div>
        <div class="col-sm-6">
            <div class="form-group field-checkoutform-recipient_info-region_delivery">

<input type="text" id="checkoutform-recipient_info-region_delivery" class="form-control" name="CheckoutForm[recipient_info][region_delivery]" value="Ивановская обл" placeholder="Регион/область">

<div class="help-block"></div>
</div>        </div>
    </div>
<div class="row giving_order_point_1_block" style="display: block;">
        <div class="col-sm-12">
            <div class="form-group field-checkoutform-recipient_info-city_delivery">

<input type="text" id="checkoutform-recipient_info-city_delivery" class="form-control" name="CheckoutForm[recipient_info][city_delivery]" value="Иваново" placeholder="Город/Населенный пункт">

<div class="help-block"></div>
</div>        </div>
    </div>
<div class="row giving_order_point_2_block" style="display: none;">
        <div class="col-sm-12">
            <div class="form-group field-checkoutform-recipient_info-street_delivery">

<input type="text" id="checkoutform-recipient_info-street_delivery" class="form-control" name="CheckoutForm[recipient_info][street_delivery]" placeholder="Улица">

<div class="help-block"></div>
</div>        </div>
    </div>
<div class="row giving_order_point_2_block" style="display: none;">
        <div class="col-sm-4">
            <div class="form-group field-checkoutform-recipient_info-house_delivery">

<input type="text" id="checkoutform-recipient_info-house_delivery" class="form-control" name="CheckoutForm[recipient_info][house_delivery]" placeholder="Дом">

<div class="help-block"></div>
</div>        </div>
        <div class="col-sm-4">
            <div class="form-group field-checkoutform-recipient_info-flat_delivery">

<input type="text" id="checkoutform-recipient_info-flat_delivery" class="form-control" name="CheckoutForm[recipient_info][flat_delivery]" placeholder="Квартира">

<div class="help-block"></div>
</div>        </div>
        <div class="col-sm-4">
            <div class="form-group field-checkoutform-recipient_info-zip_delivery">

<input type="text" id="checkoutform-recipient_info-zip_delivery" class="form-control" name="CheckoutForm[recipient_info][zip_delivery]" placeholder="Индекс">

<div class="help-block"></div>
</div>        </div>
    </div>
<div class="row to_terminal_city_block" style="display: none;">
        <div class="col-sm-12">
            <div class="form-group field-checkoutform-shipping_company_delivery_city">

<input type="text" id="checkoutform-shipping_company_delivery_city" class="form-control" name="CheckoutForm[shipping_company_delivery_city]" placeholder="Город">

<div class="help-block"></div>
</div>        </div>
    </div>
<div class="row address_delivery_block" style="display: block;">
        <div class="col-sm-12">
            <div class="form-group field-checkoutform-recipient_info-address_delivery">

<input type="text" id="checkoutform-recipient_info-address_delivery" class="form-control" name="CheckoutForm[recipient_info][address_delivery]" value="ПВЗ - тестовый" placeholder="Пункт выдачи заказов">

<div class="help-block"></div>
</div>        </div>
    </div>

[Игорь]

TCHProgrammer, я уже ответил выше, HTML код я и так увидел в PHP файле

[TCHProgrammer]

loonny, я для теста сделал вот так:

<div class="col-sm-12 col-xs-12 col-md-12">
            <div class="form-group field-checkoutform-shipping_method_id required has-success">

<select id="checkoutform-shipping_method_id" class="form-control" name="CheckoutForm[shipping_method_id]" aria-required="true" aria-invalid="false">
<option value="">Способ доставки *</option>
<option value="1">Самовывоз</option>
<option value="2">ТК Деловые линии</option>
<option value="3">ТК ПЭК</option>
<option value="4">Энергия</option>
<option value="5">ЖелДорЭкспедиция</option>
<option value="6">ТК GTD (бывш. КИТ)</option>
<option value="8">ТК ТрансВектор</option>
<option value="9">ТК Карго</option>
<option value="10">Байкал-сервис</option>
<option value="17">ТК GTD через Желдоральянс</option>
<option value="18">ТК Возовоз</option>
<option value="11">СДЭК</option>
<option value="12">SPSR Express</option>
<option value="13">DPD</option>
<option value="20" selected="">Boxberry</option>
<option value="15">Почта России</option>
<option value="16">EMS Russian Post</option>
</select>

<div class="help-block"></div>
</div>        </div>

Это проблему не решило.

А col-12 - не подходит вообще. Как Вы считаете, может parent-блок? В нём всё дело?

[TCHProgrammer]

loonny, я сделал вот так:
Добавил parent-блоку col-xs-6 col-md-6

<div class="col-sm-6 col-xs-6 col-md-6">
    <div class="row shipping_method_id_block" style="display: block;">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12">
                    <h2>Доставка</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row kaliningrad_choice_info_block" style="display: none;">
        <div class="col-sm-12">
            <span style="color:red;">*Оплата только на р/счет, отправка только ТК ПЭК</span>
        </div>
    </div>
        <div class="row shipping_method_id_block" style="display: block;">
        <div class="col-sm-12 col-xs-12 col-md-12">
            <div class="form-group field-checkoutform-shipping_method_id required has-success">

<select id="checkoutform-shipping_method_id" class="form-control" name="CheckoutForm[shipping_method_id]" aria-required="true" aria-invalid="false">
<option value="">Способ доставки *</option>
<option value="1">Самовывоз</option>
<option value="2">ТК Деловые линии</option>
<option value="3">ТК ПЭК</option>
<option value="4">Энергия</option>
<option value="5">ЖелДорЭкспедиция</option>
<option value="6">ТК GTD (бывш. КИТ)</option>
<option value="8">ТК ТрансВектор</option>
<option value="9">ТК Карго</option>
<option value="10">Байкал-сервис</option>
<option value="17">ТК GTD через Желдоральянс</option>
<option value="18">ТК Возовоз</option>
<option value="11">СДЭК</option>
<option value="12">SPSR Express</option>
<option value="13">DPD</option>
<option value="20" selected="">Boxberry</option>
<option value="15">Почта России</option>
<option value="16">EMS Russian Post</option>
</select>

<div class="help-block"></div>
</div>        </div>
    </div>
</div>

[TCHProgrammer]

loonny, Ура! Сработало! Я убрал col-sm-6 и col-sm-12 . Вместо них поставил col-6 и col-12. И всё стало доступно.

[Игорь]

TCHProgrammer, Там есть кнопочка "выбрать решением" )

Answer 2

[TCHProgrammer]

Ура! Сработало! Я col-sm-6 и col-sm-12 заменил на соответствующие col-md-6 и col-md-12. И всё стало вводиться. Это просто bootstarp тупил.