Как сделать поля формы в размер блока?

334
14 февраля 2017, 17:38

Задача:

Сделать поля формы в размер блока в который эта форма помещена. Проблема в том-что форма смотрится по разному на разных сайтах.

Как это это поправить?

Код HTML:

popup.innerHTML =
                '<div class="lead-h-header">' +
                    '<div id="lead-h-close">' + options.textClosed + '</div>' + //&times;
                '</div>' +
                '<div class="lead-h-clear"></div>' +
                '<div class="lead-h-content" id="lead_h_content">'+
                    '<div id="lead-h-title">' + options.TitleLeadHunter + '</div>' +
                    '<div class="lead-h-text-placeholder">' + options.PlaceholderLeadHunter + '</div>' +
                '</div>' +
                '<div class="lead-h-clear"></div>' +
                '<div id="lead_h_form">' +
                    '<input id="lead_h_name" type="text"  name="name" placeholder="'+ options.LHtextImputName +'" />' +
                    '<input id="lead_h_phone" type="text"  name="phone" placeholder="'+ options.LHtextImputPhone +'"  />' +
                    '<input type="submit" id="lead-h-submit" value="' + options.ButtonLeadHunter + '" />' +
                '</div>' +
                '<div class="text-after-send-leadhunter" id="text_after_leadhunter">' + options.AfterButtonLeadHunter + '</div>' +
                '<div class="lead-h-clear"></div>' +
                '<div class="ucrm-h-after">' + options.LHtext_ucrm_cope + '</div>';

Код CSS:

#lead-h-popup{line-height:30px;font-family:sans-serif;position:fixed;top:50px;z-index:99999;background:#fff;color:#333;border-radius: 8px 8px 8px 8px;box-shadow:0 8px 32px rgba(51,51,51,.7);max-width:90%;min-width:250px; cursor:default;transition:top .2s ease-out .1s, opacity .5s ease .1s;padding:20px 20px 5px 20px;}#lead-h-popup input {min-height: 20px !important}
#lead-h-wrap{background:#000;opacity:0;position:fixed;top:0;z-index:999;width:100%;height:100%;transition:opacity .5s ease-out 0;cursor:pointer;}
#lead-h-title{display:inline-block;margin-bottom:12px;line-height:18px;font-size:18px;}
#lead-h-close{position: absolute;width: 72px;top: 2px;right: 8px;font-size:32px;text-align:right;display:inline-block;text-decoration:none;color:#ccc;cursor:pointer;font-weight:700;}
#lead-h-close:hover{text-decoration:none;color:#555;}#lead-h-input{border:1px solid #999;height:20px;width:150px;background:#fff;}
#lead-h-submit{border:1px solid #383;float:left;height:38px !important;background:#5a5;color:#fff;cursor:pointer;font-weight:700;background-image:linear-gradient(to bottom,#5a5 0%,#494 100%);text-shadow:0 -1px 0 #383;}
#lead-h-submit:hover{background:#494;background-image:linear-gradient(to bottom,#494 0%,#383 100%);}
#lead-h-submit:active{background-image:linear-gradient(to bottom,#383 0%,#494 100%);}
#lead_h_name,#lead_h_phone{padding: 9px 5px 9px 15px !important; max-height:20px !important;} 
#lead_h_name,#lead_h_phone,#lead-h-submit{min-width: 150px !important;max-width: 230px !important;font-size:16px !important;font-family:sans-serif !important;float:left;line-height:18px;border-radius:2px;margin:4px 16px 0 0;padding:8px  !important;}
#lead_h_name,#lead_h_phone {border: 1px solid #ccc;padding: 10px !important;}
#lead-h-submit:focus,#lead_h_name:focus,#lead_h_phone:focus{outline:0;}
#lead_h_form{margin-top:12px;float:left;}
.lead-h-header{border-bottom:1px solid #eee!important;padding-bottom:8px;float:left;}
.lead-h-after{margin-top:16px;float:left;font-size:13px;}
.ucrm-h-after{margin-top:16px !important; float:right !important; font-size:10px !important; color:#ccc !important} 
.ucrm-h-after a {font-size:10px !important; color:#333 !important; font-weight:700;}
.lead-h-label{margin-top:15px;margin-right:12px;font-size:16px !important;line-height:13px;}
.lead-h-hidden{display:none;}.lead-h-clear{clear:both;display:block;}
.lead-h-content{clear:both;display:block;}
.lead-h-text-placeholder{display:block;margin-bottom:12px;line-height:16px;font-size:16px;}
.text-after-send-leadhunter{display:none; padding-top:30px; font-size:24px; text-align:center;}
.input-h-error{border: 1px solid red !important;}
Answer 1

Задайте ширину форме.

#lead_h_form {
  width: 100%;
  margin: auto;
}
READ ALSO
JS инициализация скрипта

JS инициализация скрипта

Как сделать так, чтобы скрипт начинал свою работу только в том случае, если пользователь докрутил до конкретного места на странице? В мое...

409
Скрипт не видит id input&#39;a

Скрипт не видит id input'a

Тег input для ввода номера телефона, id которого равен "#phone"Нужно, чтобы при вводе автоматически ставился знак "-"

345
Нет доступа к файлу c#

Нет доступа к файлу c#

Если цикл идет до 2,то все нормально, но стоит циклу идти до 3, как дает ошибку, что не может получить доступ к doneexe т

333
Генерация окружностей в Windows Forms

Генерация окружностей в Windows Forms

У меня есть класс Ball, его метод Draw, который рисует окружностьПри клике на форму я создаю обьект класса и вызываю метод, который рисует окружность...

323