Почему разная высота между полями в страницах

[mstdmstd]

Всем привет,
2 редактора админики с одним файлом стилей. Не могу понять почему разная высота между полями .
На этой старнице высота правильная :
Страница 1

На этой странице :
Страница 2
в высоте между полями появляются лишние 10 px.
 

В инспекторе вижу что для обоих редакторов :

form-control = padding-top:5px;    padding-bottom:5px

form-group =margin-top:10px;    margin-bottom:10px

Во второй странице редактор внутри таба со своими классами - но влияет ли это на высоту между полями и как не могу найти...
Стили в файле стилей определены как :
 

.form-horizontal .form-group {
    /*margin: 0px;*/
    margin: 10px 0px 10px 0px;
    /*margin: 10px 5px 10px 5px;*/
    /*padding: 0px;*/
    /*border: 0px solid navy;*/
     /*margin: 5px;*/
     /*margin: 10px 5px 5px 5px;*/
     padding: 0px;
     border: 1px solid navy; /* DEBUGGING */
}

.form-control {
    /*height: 30px;*/
    /*color: #808080;*/
    padding: 5px 5px 5px 5px;
    /*margin: 5px 0px 5px 0px;*/
    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(215, 215, 215, 0.9);*/
    height: 34px;
    width: 100%;
    color: #808080;
    margin: auto;
    display: block;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(215, 215, 215, 0.9);
    border: 0px dotted red;  /*DEBUGGING*/
}

.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(128, 128, 128, 0.9);

}

  Спасибо!

[Igor Schnaider]

Поля схлопнулись в первом случае. Во втором float: left не позволяет.

[mstdmstd]

Значит при заданных стилях высота неправильна в 1м случае(Banner Editor) а в Tour Editor правильна ?
Уточните пожалуйста для какого элемента

 float: left 

Вы имеете в виду ?

[Igor Schnaider]

 

[mstdmstd]

  Спасибо!
я добавил float: left в определение form-group :

.form-horizontal .form-group {
    margin: 10px 0px 10px 0px;
     padding: 0px;
     border: 1px solid navy;
     float: left;
 }

ряд редакторов оказались с поломанным дизайном,
починить это я лейблы и контролы обернул  в дивы с

class="row"

 и

"form-group col-sm-6 ",

 если хочу 2 инпута поместить на одной строке:
   

                 <div class="row">
                        <div class="form-group col-sm-6 ">
                            <label for="title" class="col-xs-12 col-sm-offset-1 col-sm-3 control-label">Title</label>
                            <div class="col-xs-12 col-sm-6 col-sm-offset-right-2">
                                <input type="text" name="title" id="title" class="form-control " value="" size="30" maxlength="50" placeholder="Title of Banner. Must be unique in system">
                            </div>
                        </div>

                        <div class="form-group ">
                            <label for="img" class="col-xs-12 col-sm-offset-1 col-sm-3 control-label">Img</label>
                            <div class="col-xs-12 col-sm-6 col-sm-offset-right-2">
                                <input type="text" name="img" id="img" class="form-control " value="" readonly="" size="30" maxlength="50" placeholder="Img of Banner"> <a onclick="javascript:showBannerImage();" class="a_link">View</a><br>
                                <input type="file" name="img_file_upload" id="img_file_upload" class="form-control ">
                                                                    <span>                <span id="anchor_link_middle"></span>
        </span>
                                    <span>            <a class="debugging_anchorlink top_margin" href="#anchor_link_top">top</a>
                     <a class="debugging_anchorlink " href="#anchor_link_bottom">bottom</a>
    </span>
                               
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="form-group col-sm-6 ">
                            <label for="descr" class="col-xs-12 col-sm-offset-1 col-sm-3 control-label">Description</label>
                            <div class="col-xs-12 col-sm-6 col-sm-offset-right-2">
                                <input type="text" name="descr" id="descr" class="form-control " value="" size="50" maxlength="255" placeholder="Description of Banner">
                            </div>
                        </div>

                        <div class="form-group col-sm-6 ">
                            <label for="href" class="col-xs-12 col-sm-offset-1 col-sm-3 control-label">Href</label>
                            <div class="col-xs-12 col-sm-6 col-sm-offset-right-2">
                                <input type="text" name="href" id="href" class="form-control " value="" size="50" maxlength="50" placeholder="Last Name of Banner">
                            </div>
                        </div>

                    </div>

Вроде наормально выглядит... Или можно как-то лучше ?

[Igor Schnaider]

Я бы посоветовал вынести ваши стили для этих форм в отдельный класс, чтобы не ломать другие .form-group, которые могут быть еще где-то.

[mstdmstd]

17 часов назад, Igor Schnaider сказал:

Я бы посоветовал вынести ваши стили для этих форм в отдельный класс, чтобы не ломать другие .form-group, которые могут быть еще где-то.

Сорри , какие стили Вы имеете в виду?

Я знаю что вместо писания style втемплейте лучше их выносить в классе, но разве в коде выше стили?

[Igor Schnaider]

2 часа назад, mstdmstd сказал:

Сорри , какие стили Вы имеете в виду?

Я имел ввиду вот это

.form-horizontal .form-group {
  margin: 10px 0px 10px 0px;
  padding: 0px;
  border: 1px solid navy;
  float: left;
}

Этот float: left может сломать существующую верстку еще где-то.