Версия HTMLayout — 3.3.2.14.
Есть следующий код, который создает грид с column-resizer и несколькими столбцами:
| | HTML |
| | <html>
<head>
<style>
@const GRID_HEADER_COLOR : #F7FAFC #F7FAFC #D6DEEA #D6DEEA;
@const GRID_BORDER_COLOR : #9DB9EB;
@const GRID_CELL_BORDER_COLOR : #D5E4F2;
@const GRID_CURRENT_ROW_BGR_COLOR : #C8D8F4;
body
{
font-family: Tahoma;
font-size: 8pt;
}
plaintext
{
font-family: Tahoma;
font-size: 8pt;
}
table#grid
{
width: *;
height: *;
behavior: grid column-resizer;
overflow: auto;
border: 1px solid @GRID_BORDER_COLOR;
border-spacing: -1px; /* equal to border-collapse: collapse;*/
background-color: white;
}
table#grid th
{
height: 1.3em;
background-color: @GRID_HEADER_COLOR;
padding-left: 2pt;
padding-right: 2pt;
padding-top: 1pt;
padding-bottom: 1pt;
border-right: 1px solid @GRID_BORDER_COLOR;
}
table#grid td
{
border: 1px solid @GRID_CELL_BORDER_COLOR;
}
table#grid tr td:first-child
{
border-left: 1px solid @GRID_BORDER_COLOR;
}
table#grid tr td:last-child
{
border-right: 1px solid @GRID_BORDER_COLOR;
}
table#grid tr:current
{
background-color: @GRID_CURRENT_ROW_BGR_COLOR;
}
table#grid plaintext
{
width: *;
height: max-intrinsic;
overflow: none;
background-image: none;
focus-on!: self.parent():expanded = true;
focus-off!: self.parent():expanded = false;
}
table#grid plaintext:focus
{
background-color: #F3F6FC;
}
table#grid td:expanded
{
background-color: #F3F6FC;
}
table#grid tr th:nth-child(1)
{
width: 15%%;
}
table#grid tr th:nth-child(2)
{
width: 70%%;
}
table#grid tr th:nth-child(3)
{
width: 5%%;
}
table#grid tr th:nth-child(4)
{
width: 5%%;
}
table#grid tr th:nth-child(5)
{
width: 5%%;
}
</style>
</head>
<body>
<table #grid fixedrows=1>
<tr>
<th>Category</th>
<th>Expression</th>
<th>Sample</th>
<th>Universe</th>
<th>Percentage</th>
</tr>
<tr>
<td><plaintext>Category 1</plaintext></td>
<td><plaintext>Enter some very long expression here</plaintext></td>
<td>1000</td>
<td>1000</td>
<td>100</td>
</tr>
<tr>
<td><plaintext>Category 2</plaintext></td>
<td><plaintext>Enter some very long expression here</plaintext></td>
<td>1000</td>
<td>1000</td>
<td>100</td>
</tr>
</table>
</body>
</html>
|
| | |
При попытке ресайза
второго столбца наблюдается проблема: ширина
первого столбца начинает меняться — если тянуть
правую границу второго столбца вправо, первый столбец начинает сжиматься, если влево — начинает разбухать. Если предварительно потянуть правую границу первого столбца в любую сторону (не важно — вправо или влево), глюк исчезает. Все начинает работать правильно.
Дальше — больше! То же самое наблюдается и с остальными столбцами: меняем ширину столбца n, двигая его правую границу, начинает меняться ширина какого-нибудь столбца, из тех, что левее (n-<какое-то число>, закономерности я не уловил). Если сделать магический пасс, изменив ширину одного или нескольких из этих более левых столбцов, глюк пропадает.
Может, я что-то делаю не так?
