Проблема со сплиттером
От: Hawk Россия  
Дата: 14.10.10 13:03
Оценка:
Есть такой код:
  HTML
<html>
<head>
<style>
        .vcontainer
        { 
            width: *;
            height: *;
        }
        .vspring
        {
            width: *;
            height: *;
        }
        .vsplitter  
        { 
            behavior: splitter; 
            height: 3pt; 
            width: *;
            cursor: n-resize; 
            margin: 0; 
            border: none; 
            background-color: silver; 
        }
</style>
</head>
<body>

    <!-- Expression mode editor staff begins here -->
    
    <div .vcontainer #expression_editor_area>
    
        <div .vcontainer>
        
            <div style="height: 70%; display: none;" #integer_text_area>
                <table #integer_text_toolbar>
                    <tr>
                        <td>1</td><td>2</td><td>3</td>
                    </tr>
                </table>
                <widget #text_editor type="textarea" />
            </div> <!-- end of integer_text_area -->
            
            <div style="height: 70%; display: block;" #scaled_integer_area>
                <table #integer_scales_toolbar>
                    <tr>
                        <td>1</td><td>2</td><td>3</td>
                    </tr>
                </table>
                <table #grid fixedrows="1" .vspring>
                    <tr>
                        <td>1</td><td>2</td><td>3</td>
                    </tr>
                </table>
            </div> <!-- end of scaled_integer_area -->
            
            <div style="height: 70%; display: none;" #logical_area>
                <table #logical_toolbar>
                    <tr>
                        <td>1</td><td>2</td><td>3</td>
                    </tr>
                </table>
                <widget #text_editor type="textarea" />
            </div> <!-- end of logical_area -->
            
            <div style="height: 70%; display: none;" #categorical_area>
                <table #categorical_toolbar>
                    <tr>
                        <td>1</td><td>2</td><td>3</td>
                    </tr>
                </table>
                <table #grid fixedrows="1" .vspring>
                    <tr>
                        <td>1</td><td>2</td><td>3</td>
                    </tr>
                </table>
            </div> <!-- end of categorical_area -->
            
            <hr class="vsplitter" />
            
            <div style="height: 30%;">
                <table>
                    <tr>
                        <td>Notes:</td>
                    </tr>
                </table>
                <widget #notes type="textarea" />
            </div>
            
        </div>
        
    </div>

</body>
</html>

Т.е. подряд идут несколько div'ов, один из которых — видимый (display: block, либо visibility: visible), остальные — невидимые (display: none или visibility: collapse). После них идет сплиттер, далее — еще один div.

Проблема в том, что сплиттер работает корректно, только если display: block стоит у div'а, идущего сразу перед сплиттером. Если поставить display: block у любого другого div'а, из предшествующих сплиттеру, а у остальных предшествующих — display: none, сплиттер не работает.

Почему невидимые div'ы влияют на работу сплиттера? И как это можно исправить? Допускается ли вообще таким образом переключать контент, идущий до сплиттера?
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.