проблема css: абсолютный позиционный диапазон не будет выходить за пределы содержимого div - PullRequest
Новая
       2

проблема css: абсолютный позиционный диапазон не будет выходить за пределы содержимого div

2 голосов
/ 21 декабря 2011

Как вы можете видеть на следующем рисунке, у меня есть простая форма, которая проверяет поля в режиме реального времени и генерирует span, который говорит, является ли это поле действительным или нет. проблема в том, что по какой-то причине span не будет выходить за пределы содержащего div, даже если в его правиле css есть position:absolute. Кстати, диапазон получает свою позицию right, используя javascript, который вычисляет ширину этого поля (поскольку каждое поле отличается по ширине). какие-либо предложения?

register form css issue

вот код css: 

div.row {
    background:url('/img/formBackground.gif') repeat;
    margin:0 2px 2px 2px;border-radius:10px 0 10px 0;
    position:relative
}

.row span.valid,
.row span.invalid {
    line-height:18px;
    height:20px;padding:0 22px 0 5px;
    display:block;font-size:13px;
    border-radius:3px;position:absolute;
    z-index:100;top:4px;right:160px
}

вот HTML-код: 

    <div class="row">
        <label for="email">דואר אלקטרוני: <span class="required">*</span></label>
        <div class="divider"></div>
        <input type="text" name="email" id="email" style="width:250px" dir="ltr"/>
    </div>

вот код JavaScript: 

email.onchange = function validateEmail() {
    span = document.getElementById('span4');
    span.style.right = calcDistance(email);
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    el = email.value;
    if(el == null || el == '') {span.setAttribute('class','invalid');span.innerHTML = "<span></span>עליך להזין דוא\"ל";return false;}
    if(reg.test(el) == false) {span.setAttribute('class','invalid');span.innerHTML = "<span></span>כתובת הדוא\"ל אינה תקינה";return false;}
    else {span.setAttribute('class','valid');span.innerHTML = "<span></span>תקין";return true;}
}

    function calcDistance(el) {
    var spanDistance = 160 + 20;
    var targetWidth = el.offsetWidth;
    return targetWidth + spanDistance + 'px';
}

Вот как я хочу, чтобы это выглядело (span выходит за пределы содержащего div). Я смог получить этот результат, только дав span определенное значение *1021*, что не является хорошим решением, поскольку каждое сообщение отличается по ширине:

register form with live validation

Ответы [ 2 ]

3 голосов
/ 21 декабря 2011

Элементы с position:relative будут "захватывать" любые абсолютно позиционированные дочерние элементы.Другими словами, абсолютные координаты элемента относятся к родителю.

Хотя расчет ширины ввода для создания ширины сообщения об ошибке является разумным, это может быть слишком хрупким дизайном,Вы можете получить сообщения об ошибках, которые слишком малы для самого сообщения, особенно если учесть, что вы не имеете 100% контроля над размером шрифта пользователя.

Здесь недостаточно кода для воспроизведениявыходные данные в вашем изображении, но возможные решения или обходные пути могут включать:

  • Удалить position:relative из div.row
  • Измените свой дизайн и вместо этого поместите сообщение об ошибке под входом
1 голос
/ 21 декабря 2011

Изучив несколько старых сообщений, мне удалось решить проблему, добавив white-space:no-wrap; к правилу span CSS.

...