Скроллинг в ячейке таблицы

KVA · February 17, 2010

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.full{height:100%; width:100%; margin:0px;padding:0px; border:3px;}
#scrollable-container {height:100%; width:100%; overflow: auto; position: relative;  }
#relative {min-height: 0; position: relative; width:100%;}

label { display: inline-block;}
label.error { width: auto; margin-left: 10px; color: red; 
              font-style: italic; }
label.ok { width: auto; margin-left: 10px; color: green; 
              font-style: italic; }
input.pole { width: 250px; border: 1px solid black; }
input.error { border: 1px solid red; }
</style>
<script type='text/javascript' src='jquery-1.4.min.js'></script>
<script type='text/javascript' src='jquery.validate.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
   $.validator.setDefaults({ // Общие опции для всех методов validate()
      submitHandler: function(form) {
         // Здесь отправляем форму обычным способом или через AJAX
         alert("Форма успешно проверена");
      }
   });
   $("#frm2").validate({ // Проверка данных формы 2
      success: function(elem) {
         elem.addClass("ok").html("Правильно!");
      },
      rules: { // Задаем правила заполнения полей
         pole1: {
            required: true, // Обязательное поле
            rangelength: [2, 16] // От 2 до 16 символов
         },
         pole2: "required" // Обязательное поле
      },
      messages: { // Задаем сообщения, выводимые при нарушении правил
         pole1: {
            required: "Поле не заполнено",
            rangelength: "Допустимо от 2-х до 16-ти символов"
         },
         pole2: "Поле не заполнено"
      }
   });
});
</script>
</head>
<body>

<form action="" id="frm2">
<table class='full' >
<tr align='left' valign='top'>
<td>
<div id='scrollable-container'>
<div id='relative'>

<div style="position:absolute; top:100px; left:100px;">
Поле 1*:
<input type="text" name="pole1" ><br>
</div>
<div style="position:absolute; top:1000px; left:1010px;">
Поле 2*:
<input type="text" name="pole2" >
</div>

</div></div>
</td>
</tr>
<tr align='right' valign='top' height='10%'>
<td>
<input type="submit" value="Отправить">
</td>
</tr>
</table>
</form>
</body>
</html>

А проблема в том, чтоб при некорректном pole2 сообщение показывалось как в pole1(в одной строке с input), а сейчас это не так. Это связано с тем,что содержимое скролла не расширяется при добавлении сообщения(обратите внимание что и название Поле 2* над input). Как решить?

Edited February 17, 2010 by KVA

KVA · February 17, 2010

Уже решила :lol: Добавила в div свойство White-space: nowrap; и усё! Всем спасибо!

Sign In

Скроллинг в ячейке таблицы

Question

KVA

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

KVA

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information