overflow у класса fancybox-inner

333
25 декабря 2016, 22:05

Есть блок - на картинке. возле поля выскакивает блок с ошибкой если она есть.

Проблема в том что по умолчанию у класса fancybox-inner значение свойства overflow стоит auto и так получается что когда выскакивает ошибка блок с ошибкой обрезается.

Я изменил значение на inherit всё видно. Но теперь если окно маленькое показывается так как первом фото.

Подскажите как поправить можно?

HTML формы:

<div id="edit-category-form" class="form no-trans">
    <h1>Edit/Remove</h1>
    <div class="form-block category-status clearfix">
        <input type="text" id="new" placeholder="Category" class="form-control"/>
        <input type="hidden" id="old" />
        <i class="fa fa-tag no-trans" aria-hidden="true"></i>
        <div class="error-tooltip clearfix">
            <ul class="error-main"></ul>
        </div>
    </div>
    <div class="form-block clearfix">
        <button id="remove-category-btn"><i class="fa fa-trash-o" aria-hidden="true"></i>Remove</button>
        <button id="edit-category-btn"><i class="fa fa-floppy-o" aria-hidden="true"></i>Save</button>
    </div>
</div>

CSS формы:

div.form {
    width: 350px;
    padding: 40px 24px;
    background: #eee;
    display: none;
    z-index: 60;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}
div.form h1 {
    color: #ccc;
    font-size: 50px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 10px 0;
}
input.form-control{
    width: 100%;
    height: 46px;
    padding: 5px 7px 5px 25px;
    background: #fff;
    color: #666;
    line-height: 28px;
    font-size: 18px;
    border: 2px solid #ddd;
}
div.form-block {
    width: 100%;
    position: relative;
    margin-bottom: 8px;
}
div.form-block i.fa {
    top: 15px;
    left: 9px;
    position: absolute;
}
div.form-block.confirm {
    margin: 20px 0 0 0;
}
div.form-block ul.error-main {
    line-height: 32px;
}
div.form-block input.form-control:focus,
div.form-block input.form-control:focus + i.fa,
div.form-block textarea.form-control:focus {
    border-color: #10CE88;
    color: #10CE88;
}
div.form-block.wrong-entry {
    -moz-animation: wrong-log 0.3s;
    -webkit-animation: wrong-log 0.3s;
    animation: wrong-log 0.3s;
}
.wrong-entry .form-control + .fa,
div.form-block.wrong-entry .form-control{
    border-color: #ed1c24;
    color: #ed1c24;
}
div.form-block.req p {
    width: 100%;
    text-align: left;
    font-size: 12px;
    color: #989898;
}
textarea.form-control  {
    width: 95%;
    height: 50px;
    padding: 5px 7px 5px 30px;
    background: #fff;
    color: #666;
    font-size: 18px;
    border: 2px solid #ddd;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
input.form-control:focus, input.form-control:focus + .fa,
input.form-control:focus + .fa-envelope-o {
    border-color: #10CE88;
    color: #10CE88;
}
div[class$="status"] .fa {
    position: absolute;
    left: 11px;
    top: 14px;
    color: #999;
}
.form-block span.req {
    height: 46px;
    float: right;
    margin: 0 0 0 5px;
}
div.form-block.wrong-entry,
div.user-policy.wrong-entry label {
    -moz-animation: wrong-log 0.3s;
    -webkit-animation: wrong-log 0.3s;
    animation: wrong-log 0.3s;
}
.wrong-entry .form-control + .fa,
div.form-block.wrong-entry .form-control {
    border-color: #ed1c24;
    color: #ed1c24;
}
div.error-tooltip {
    width: 100%;
    top: 0;
    right: 101%;
    display: block;
    z-index: 1000;
    opacity: 0;
    padding: 7px 0 7px 5px;
    line-height: 46px;
    font-size: 12px;
    position: absolute;
}
div.error-tooltip:after {
    left: 100%;
    top: 50%;
    /*border: solid transparent;*/
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #ed1c24;
    border-width: 5px;
    margin-top: -5px;
}
div.error-top:after {
    top: 18%;
}
ul.error-main {
    color: #FFF;
    text-align: center;
    background: #EC3940;
    line-height: 40px;
}
ul.error-main li.error-li{
    line-height: 24px;
}
READ ALSO
Не работает ClientWidth

Не работает ClientWidth

Высоту окна (браузера) выводит правильно, а ширину выводит всего экрана а не окна (браузера)При этом имеется боковой scroll, должен вывести ширину...

411
Конфигурационный файл txt для js

Конфигурационный файл txt для js

Есть некоторый iframe с видео, который открывается на странице по таймаутуМожно ли сделать конфиг в формате

404
JS - Доработать функцию переноса [требует правки]

JS - Доработать функцию переноса [требует правки]

Здравствуйте, очень слаб в JS, нужна помощь, есть скрипт

344
Как оптимизировать данный код

Как оптимизировать данный код

Здравствуйте, Есть 2 блока, хочется чтобworkDataHeight блок брал высоту

347