article

overflow

	От:	-aka-	http://wtware.ru
	Дата:	30.09.07 23:37

Делаю таблицу. Пока таблица помещается на экране и никаких overflow я не указываю, оно само считает свои ширину. Т.е. таблица занимает на экране именно столько места, сколько ей нужно, и весь текст отображается:

<html>
<head>
<style>
.option_grid
{
}

.option_grid td
{
    white-space:nowrap;
    border: 1px solid black;
}
</style>
</head>
<body>
<table class=option_grid>
    <tr><td>В</td></tr>
    <tr><td>таблицу что-то</td></tr>
    <tr><td>записано.</td></tr>
    <tr><td>Строки короткие</td></tr>
    <tr><td>и их</td></tr>
    <tr><td>пока</td></tr>
    <tr><td>немного.</td></tr>
</table>
<p>Привет Мир!</p>
</body>
</html>

А если я попрошу у нее вертикальный скроллер:

.option_grid
{
overflow-y:scroll;
}

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

... << RSDN@Home 1.2.0 alpha rev. 720>>

Re: overflow

	От:	CrOm	vovan.dankov.net
	Дата:	01.10.07 01:42

A><html>
A><head>
A><style>
A>.option_grid
A>{
A>}

A>.option_grid td
A>{
A>    white-space:nowrap;
A>    border: 1px solid black;
A>}
A></style>
A></head>
A><body>
A><table class=option_grid>
A>    <tr><td>В</td></tr>
A>    <tr><td>таблицу что-то</td></tr>
A>    <tr><td>записано.</td></tr>
A>    <tr><td>Строки короткие</td></tr>
A>    <tr><td>и их</td></tr>
A>    <tr><td>пока</td></tr>
A>    <tr><td>немного.</td></tr>
A></table>
A><p>Привет Мир!</p>
A></body>
A></html>
A>

A>А если я попрошу у нее вертикальный скроллер:

A>.option_grid
A>{
A> overflow-y:scroll;
A>}

A>То она сама добавляет еще и горизонтальный скроллер, и урезает содержимое таблицы и по горизонтали, и по вертикали. Разве это правильно? Хочу чтобы оно добавило вертикальный скроллер за счет расширения таблицы, не обрезая видимую область.

добавь еще overflow-x:none;

Re[2]: overflow

	От:	c-smile	http://terrainformatica.com
	Дата:	01.10.07 03:13

Здравствуйте, CrOm, Вы писали:

CO>добавь еще overflow-x:none;

overflow-x:hidden;

overflow-x:none — это несколько другое.

Re[3]: overflow

	От:	CrOm	vovan.dankov.net
	Дата:	01.10.07 03:36

Здравствуйте, c-smile, Вы писали:

CS>Здравствуйте, CrOm, Вы писали:

CO>>добавь еще overflow-x:none;

CS>overflow-x:hidden;

CS>overflow-x:none — это несколько другое.

да, перепутал

Re: overflow

	От:	c-smile	http://terrainformatica.com
	Дата:	01.10.07 05:38

Здравствуйте, -aka-, Вы писали:

A>Делаю таблицу. Пока таблица помещается на экране и никаких overflow я не указываю, оно само считает свои ширину. Т.е. таблица занимает на экране именно столько места, сколько ей нужно, и весь текст отображается:

A>А если я попрошу у нее вертикальный скроллер:

A>.option_grid
A>{
A> overflow-y:scroll;
A>}

A>То она сама добавляет еще и горизонтальный скроллер, и урезает содержимое таблицы и по горизонтали, и по вертикали. Разве это правильно? Хочу чтобы оно добавило вертикальный скроллер за счет расширения таблицы, не обрезая видимую область.

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

Re[4]: overflow

	От:	-aka-	http://wtware.ru
	Дата:	01.10.07 21:33

Здравствуйте, CrOm, Вы писали:

CO>>>добавь еще overflow-x:none;
CS>>overflow-x:hidden;
CS>>overflow-x:none — это несколько другое.
CO>да, перепутал

Если добавлю hidden, то таблица расползается вправо до края окна. Не то. Хочу сохранить минимальную достаточную ширину.

Задача почему-то решилась добавлением "min-width:auto;". Собрать простой пример не осилю. Вообще задача появилась от непонимания правил верстки

Может кто подкинет методичку о верстке css в картинках для чайников — именно о том, как формируются размеры и размещение объектов?

... << RSDN@Home 1.2.0 alpha rev. 720>>

Re[5]: overflow

	От:	c-smile	http://terrainformatica.com
	Дата:	01.10.07 23:01

Здравствуйте, -aka-, Вы писали:

A>Здравствуйте, CrOm, Вы писали:

CO>>>>добавь еще overflow-x:none;
CS>>>overflow-x:hidden;
CS>>>overflow-x:none — это несколько другое.
CO>>да, перепутал

A>Если добавлю hidden, то таблица расползается вправо до края окна. Не то. Хочу сохранить минимальную достаточную ширину.

Это моя бага в текущем билде.

На самом деле достаточно этого:

overflow-y:scroll;

Что на самом деле выглядит с учетом встроенных стилей для table как:

table 
      { 
        overflow-x:hidden; 
        overflow-y:scroll;
        width: *; // all available width of container
        max-width: max-intrinsic; // but not greater than max-intrinsic width
      }

Это стандартное поведение таблиц без заданной ширины в html.

max-intrinsic это ширина элемента (таблицы здесь) как если бы все text внутри были в одну строку.
min-intrinsic это минимальная ширина таблицы — если меньше то уже overflow будет.

Проблема в том что в том билде что на сайте сейчас max-intrinsic не включает ширину вертикального scrollbar в случае
overflow-y:scroll; поэтому ты видишь горизонтальный scrollbar

A>Задача почему-то решилась добавлением "min-width:auto;". Собрать простой пример не осилю. Вообще задача появилась от непонимания правил верстки

Может кто подкинет методичку о верстке css в картинках для чайников — именно о том, как формируются размеры и размещение объектов?

В принципе вот это вот http://www.w3.org/TR/CSS21/box.html описывает все что там есть.

min-intrinsic/max-intrinsic константы предложил David Baron (Мозилла) но насколько мне известно в Мозилле они так и не были сделаны.