Форум

JavaCommando · #1 (**permalink**) 29.10.2011, 15:04

У меня есть таблица из одного row в котором 3 ячейки;

в 3й ячейке есть input типа text;

заполняю input типа text значением, которое больше чем область отображения (ширина значения больше ширины input' а);

затем привожу все компоненты формы в состояние disabled;

и тут проблема - input растягивается под размер своего значения и заодно растягивает таблицу! то-есть изначально заданное мной отношение для 3 ячеек 40%-20%-40% меняется в пользу проблемной ячейки...

посмотрите пожалуйста видео с демонстрацией этой проблемы и подскажите чего делать:
http://www.youtube.com/watch?v=yX9iw3PQ_eg

ksa · #2 (**permalink**) 29.10.2011, 22:09

Сообщение от JavaCommando

посмотрите пожалуйста видео с демонстрацией этой проблемы и подскажите чего делать

Забыть про видео... Сделать простенький тестовый пример, на котором это проявляется... А там и видно будет.

JavaCommando · #3 (**permalink**) 30.10.2011, 02:35

Сообщение от ksa

Забыть про видео... Сделать простенький тестовый пример, на котором это проявляется... А там и видно будет.

Легко:

<html>
<HEAD>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">

function toggleById() { 
	    toggleDisabled(document.getElementById("tableCell")); 
	}
function toggleDisabled(el) {
        try {
		    el.disabled = !el.disabled ? true: false;                 
        }
        catch(err) {
            alert(el.nodeName + "\u0020" + err.description); 
        }	
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                toggleDisabled(el.childNodes[x]);
            }
        }
    }

</script>
</HEAD>
<body>
        <table border="1" width="100%">
            <tr>
                <td width="40%">
				    <input type="button" value="Toggle disable" onclick="toggleById();" />
                </td>
                
				<td width="20%"> 
                </td>
				                
				<td width="40%">
					<div id="tableCell">
                        <input type="text" style="width: 100%;" />                     
				    </div>
                </td>				
            </tr>
        </table>
</body>
</html>

ksa · #4 (**permalink**) 30.10.2011, 10:53

Сообщение от JavaCommando

Легко:

В моём ИЕ8 твой пример вообще "идёт" по обработке ошибки...

catch(err) {
	alert(el.nodeName + "\u0020" + err.description); 
}

Цитата:

#text Объект не поддерживает это свойство или метод

Навертел ты там не мало!

А что хотел получить вообще? Т.к. для одной таблички, кнопки и инпута явно перебор...

JavaCommando · #5 (**permalink**) 30.10.2011, 13:16

Сообщение от ksa

В моём ИЕ8 твой пример вообще "идёт" по обработке ошибки...

catch(err) {
	alert(el.nodeName + "\u0020" + err.description); 
}

Навертел ты там не мало!

А что хотел получить вообще? Т.к. для одной таблички, кнопки и инпута явно перебор...

Да я переписываю интерфейс для одной проги на HTML+JS, потому как разделение кода будет отличное - UI и логика отдельно. Меньше буду в коде путаться.

Исключение мне ни о чём не говорит, поэтому и созданна эта тема.

Я активно использую для layout элемент типа <table> потому что он более предсказуемый чем <div>, для меня по крайней мере.

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

Как избежать этот глюк с disable?

ksa · #6 (**permalink**) 30.10.2011, 16:55

Сообщение от JavaCommando

Как избежать этот глюк с disable?

Я вообще не знаю, что ты делаешь в конечном итоге... Сделать инпут неактивным можно гораздо проще.
Вот это у меня работает без проблем...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function Off() { 
	document.getElementById('test').disabled=true;
}
</script>
</head>
<body>
<table border="1" width="100%">
	<tr>
		<td width="40%">
			<input type="button" value="Toggle disable" onclick="Off();" />
		</td>
		
		<td width="20%"> 
		</td>
		<td width="40%">
			<div id="tableCell">
				<input id='test' type="text" style="width: 100%;" />                     
			</div>
		</td>				
	</tr>
</table>
</body>
</html>

JavaCommando · #7 (**permalink**) 30.10.2011, 17:23

Сообщение от ksa

Я вообще не знаю, что ты делаешь в конечном итоге... Сделать инпут неактивным можно гораздо проще.
Вот это у меня работает без проблем...

Я бы с удовольствием использовал этот код, однако у меня в 1 div гораздо больше компонентов, и поэтому, выставлять им статус вручную было бы не очень "красиво". Интерфейс разделен на логические группы и в разное время могут быть активными разные наборы групп.

ksa · #8 (**permalink**) 30.10.2011, 20:44

Сообщение от JavaCommando

у меня в 1 div гораздо больше компонентов

Почему в тестовом примере их нет? Типа сюрприз потом будет?

Сообщение от JavaCommando

Интерфейс разделен на логические группы

Да как не назови... Я ведь не телепат. Делай примеры нормально, тогда можно будет продолжить...
Или так и будем в "загадки" играть?

JavaCommando · #9 (**permalink**) 30.10.2011, 20:58

Сообщение от ksa

Сообщение от JavaCommando
у меня в 1 div гораздо больше компонентов
Почему в тестовом примере их нет? Типа сюрприз потом будет?

Сообщение от JavaCommando
Интерфейс разделен на логические группы
Да как не назови... Я ведь не телепат. Делай примеры нормально, тогда можно будет продолжить...
Или так и будем в "загадки" играть?

Да я вроде ничего не скрываю - для лучшей читабельности привёл пример с минимумом кода и тем же самым багом что и в оригинальной странице.

Просто я считаю неправильным - в одном методе JS который ответственный за изменение состояния 10+ компонентов, 10+ раз вызывать getById для каждого компонента в отдельности с их собственными Id. Гораздо более изящно - рекурсивный проход по документу, что я и делаю. А IE8 падает на изменении свойства disabled. Скорее всего из-за падения и происходит этот дикий resize текстового поля.

Вопрос - почему?

ksa · #10 (**permalink**) 30.10.2011, 21:06

Сообщение от JavaCommando

Просто я считаю неправильным - в одном методе JS который ответственный за изменение состояния 10+ компонентов, 10+ раз вызывать getById для каждого компонента в отдельности с их собственными Id.

Таки никто тебя не заставляет...

На то есть циклы.

Сообщение от JavaCommando

Гораздо более изящно - рекурсивный проход по документу, что я и делаю.

Рекурсия тут точно не нужна...

Сообщение от JavaCommando

А IE8 падает на изменении свойства disabled.

Ничего там не "падает".

Делай нормальные примеры - будет шанс получать нормальные ответы.
А пока элемент один - вот и обращаются к нему как к одному. А не через такие выверты как у тебя...

Форум

Справочник

Discord чат

Курсы javascript