За последние 24 часа нас посетил 20041 программист и 1695 роботов. Сейчас ищут 1835 программистов ...

bootstrap мелкие поля

Тема в разделе "HTML и CSS", создана пользователем vikrorpert, 6 июн 2016.

  1. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    форма
    HTML:
    1. <div class="item-search">
    2.  
    3.     <form id="w0" action="/site/items" method="get">
    4.     <div class="row">
    5.  
    6.         <div class="col-lg-4">
    7.  
    8.             <div class="row">
    9.                 <div class="col-lg-6">
    10.                     <div class="form-group field-itemsearch-name_ru">
    11. <div class="col-lg-12">ru<input type="text" id="itemsearch-name_ru" class="form-control" name="ItemSearch[name_ru]" value=""></div>
    12. </div>                </div>
    13.                 <div class="col-lg-6">
    14.                     <div class="form-group field-itemsearch-name_en">
    15. <div class="col-lg-12">en<input type="text" id="itemsearch-name_en" class="form-control" name="ItemSearch[name_en]" value="те"></div>
    16. </div>                </div>
    17.             </div>
    18.  
    19.         </div>
    20.  
    21.         <div class="col-lg-8">
    22.  
    23.             <div class="row">
    24.  
    25.                 <div class="col-lg-1" style="width: 50px;"></div>
    26.  
    27.                 <div class="col-sm-1" style="width: 80px;">
    28.  
    29.                     <div class="row">
    30.                         <div class="col-lg-6">
    31.                             <div class="form-group field-itemsearch-csgotm_min has-success">
    32. <div class="col-lg-12">от<input type="text" id="itemsearch-csgotm_min" class="form-control" name="ItemSearch[csgotm_min]" value=""></div>
    33. </div>                        </div>
    34.                         <div class="col-lg-6">
    35.                             <div class="form-group field-itemsearch-csgotm_max has-success">
    36. <div class="col-lg-12">до<input type="text" id="itemsearch-csgotm_max" class="form-control" name="ItemSearch[csgotm_max]" value=""></div>
    37. </div>                        </div>
    38.                     </div>
    39.  
    40.                 </div>
    41.  
    42.                 <div class="col-sm-1" style="width: 80px;">
    43.  
    44.                     <div class="row">
    45.                         <div class="col-lg-5">
    46.                             <div class="form-group field-itemsearch-double_min has-success">
    47. <div class="col-lg-12">от<input type="text" id="itemsearch-double_min" class="form-control" name="ItemSearch[double_min]" value=""></div>
    48. </div>                        </div>
    49.                         <div class="col-lg-5">
    50.                             <div class="form-group field-itemsearch-double_max">
    51. <div class="col-lg-12">до<input type="text" id="itemsearch-double_max" class="form-control" name="ItemSearch[double_max]" value=""></div>
    52. </div>                        </div>
    53.                     </div>
    54.  
    55.                 </div>
    56.                 <div class="col-lg-1" style="width: 80px;">
    57.                     <div class="row">
    58.                         <div class="col-lg-5">
    59.                             <div class="form-group field-itemsearch-priceop_min">
    60. <div class="col-lg-12">от<input type="text" id="itemsearch-priceop_min" class="form-control" name="ItemSearch[priceop_min]" value=""></div>
    61. </div>                        </div>
    62.                         <div class="col-lg-5">
    63.                             <div class="form-group field-itemsearch-priceop_max">
    64. <div class="col-lg-12">до<input type="text" id="itemsearch-priceop_max" class="form-control" name="ItemSearch[priceop_max]" value=""></div>
    65. </div>                        </div>
    66.                     </div>
    67.                 </div>
    68.                 <div class="col-lg-1" style="width: 80px;">
    69.                     <div class="row">
    70.                         <div class="col-lg-5">
    71.                             <div class="form-group field-itemsearch-tmdoub_min">
    72. <div class="col-lg-12">от<input type="text" id="itemsearch-tmdoub_min" class="form-control" name="ItemSearch[tmdoub_min]" value=""></div>
    73. </div>                        </div>
    74.                         <div class="col-lg-5">
    75.                             <div class="form-group field-itemsearch-tmdoub_max">
    76. <div class="col-lg-12">до<input type="text" id="itemsearch-tmdoub_max" class="form-control" name="ItemSearch[tmdoub_max]" value=""></div>
    77. </div>                        </div>
    78.                     </div>
    79.                 </div>
    80.                 <div class="col-lg-1" style="width: 80px;">
    81.                     <div class="row">
    82.                         <div class="col-lg-5">
    83.                             <div class="form-group field-itemsearch-tmop_min">
    84. <div class="col-lg-12">от<input type="text" id="itemsearch-tmop_min" class="form-control" name="ItemSearch[tmop_min]" value=""></div>
    85. </div>                        </div>
    86.                         <div class="col-lg-5">
    87.                             <div class="form-group field-itemsearch-tmop_max">
    88. <div class="col-lg-12">до<input type="text" id="itemsearch-tmop_max" class="form-control" name="ItemSearch[tmop_max]" value=""></div>
    89. </div>                        </div>
    90.                     </div>
    91.                 </div>
    92.                 <div class="col-lg-1" style="width: 80px;">
    93.                     <div class="row">
    94.                         <div class="col-lg-5">
    95.                             <div class="form-group field-itemsearch-doubtm_min">
    96. <div class="col-lg-12">от<input type="text" id="itemsearch-doubtm_min" class="form-control" name="ItemSearch[doubtm_min]" value=""></div>
    97. </div>                        </div>
    98.                         <div class="col-lg-5">
    99.                             <div class="form-group field-itemsearch-doubtm_max">
    100. <div class="col-lg-12">до<input type="text" id="itemsearch-doubtm_max" class="form-control" name="ItemSearch[doubtm_max]" value=""></div>
    101. </div>                        </div>
    102.                     </div>
    103.                 </div>
    104.                 <div class="col-lg-1" style="width: 90px;">
    105.                     <div class="row">
    106.                         <div class="col-lg-5">
    107.                             <div class="form-group field-itemsearch-doubop_min">
    108. <div class="col-lg-12">от<input type="text" id="itemsearch-doubop_min" class="form-control" name="ItemSearch[doubop_min]" value=""></div>
    109. </div>                        </div>
    110.                         <div class="col-lg-5">
    111.                             <div class="form-group field-itemsearch-doubop_max">
    112. <div class="col-lg-12">до<input type="text" id="itemsearch-doubop_max" class="form-control" name="ItemSearch[doubop_max]" value=""></div>
    113. </div>                        </div>
    114.                     </div>
    115.                 </div>
    116.                 <div class="col-lg-1" style="width: 100px;">
    117.                     <div class="row">
    118.                         <div class="col-lg-5">
    119.                             <div class="form-group field-itemsearch-optm_min">
    120. <div class="col-lg-12">от<input type="text" id="itemsearch-optm_min" class="form-control" name="ItemSearch[optm_min]" value=""></div>
    121. </div>                        </div>
    122.                         <div class="col-lg-5">
    123.                             <div class="form-group field-itemsearch-optm_max has-success">
    124. <div class="col-lg-12">до<input type="text" id="itemsearch-optm_max" class="form-control" name="ItemSearch[optm_max]" value=""></div>
    125. </div>                        </div>
    126.                     </div>
    127.                 </div>
    128.                 <div class="col-lg-1" style="width: 60px;">
    129.                     <div class="row">
    130.                         <div class="col-lg-5">
    131.                             <div class="form-group field-itemsearch-opdoub_min">
    132. <div class="col-lg-12">от<input type="text" id="itemsearch-opdoub_min" class="form-control" name="ItemSearch[opdoub_min]" value=""></div>
    133. </div>                        </div>
    134.                         <div class="col-lg-5">
    135.                             <div class="form-group field-itemsearch-opdoub_max has-success">
    136. <div class="col-lg-12">до<input type="text" id="itemsearch-opdoub_max" class="form-control" name="ItemSearch[opdoub_max]" value=""></div>
    137. </div>                        </div>
    138.                     </div>
    139.                 </div>
    140.  
    141.             </div>
    142.         </div>
    143.  
    144.  
    145.     </div>
    146.  
    147.     <div class="hidden">
    148.         <button type="submit" class="btn btn-primary">Искать</button>    </div>
    149.  
    150.  
    151.     </form>
    152. </div>
    выглядит так http://imgur.com/VBUuNQ7
    проблема в том что когда кликаю на мелкие текст поля то курсор не выводится и введенный текст не отображается
    как исправить?
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Хотя бы выкладывай пример на jsfiddler или давай ссылку на какой странице можно это посмотреть
     
  3. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  5. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    хорошо вопрос что делать? как исправить?
     
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    ну можно создать класс .padding0 обнулить там padding и добавить для input этот класс
     
  7. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    а если средствами бутстрап?
    это баг или нет?
    --- Добавлено ---
    в примере в последние элементы можно вставить курсор но не видно что печатается
     
  8. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    возможно баг, исправить костылём
     
  9. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
  10. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  11. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    https://jsfiddle.net/0Lcnn6L5/4/
    самые нижние схлопнулись
    --- Добавлено ---
    вобще тупизна какаято-великий бутстрап и так глючно работает
     
  12. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    та там с сеткой перемудрил, разорвал ей всё
     
  13. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    https://jsfiddle.net/0Lcnn6L5/6/
    переписал,все равно глючит
    а что с сеткой?у меня 9 ячеек,нужно в каждую ячейку впихнуть 2 текстбокса
     
  14. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    вижу нормальные инпуты
     
  15. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    вобщем переписал на таблицы