Блог

Главная - Вопросы по программированию - Позиционирование вкладок в TabContainer

Позиционирование вкладок в TabContainer

#c# #asp.net #internet-explorer-8 #tabcontainer

#c# #asp.net #internet-explorer-8 #tabcontainer

Вопрос:

Я работаю с ajaxtoolkit:TabContainer .

Мне нужно добавить две вкладки (что я могу сделать), но мне нужен один из заголовков вкладки в крайнем левом углу, а другой в крайнем правом.

Я играл с CSS ( float:left; etc; ), но я не могу их разделить! Они всегда выглядят склеенными одна за другой.

Возможно ли разделить заголовки вкладок?

Редактировать:

Как прокомментировал @1stein, я мог бы использовать 

 .ajax__tab_header :nth-child(2) { float: right !important; }

и это сделает свое дело. Проблема в том, что это решение не работает в IE8, на который я ориентируюсь. Существуют ли какие-либо обходные пути для этого?

Комментарии:

1. Вы пробовали изменять порядок расположения панелей вкладок в представлении html? смотрите здесь .

2. @Marijn у меня нет проблем с порядком, я просто хочу, чтобы заголовки вкладок были разделены. они всегда отображаются склеенными вместе. спасибо за ваше время 🙂

3. Вот несколько советов по TabContainer и CSS.

4. Вы можете использовать этот стиль: .ajax__tab_header :nth-child(2) { float: правильно!важно; } Единственная проблема в том, что он не работает в IE ниже 9-й версии. Или вы можете использовать стиль на странице по идентификатору элемента для конкретной вкладки, но это не универсальное решение.

5. @1stein это именно то, что мне нужно, но мне нужно, чтобы это работало в ie8.. есть ли какой-нибудь обходной путь для этого?

Ответ №1:

Вы можете использовать этот стиль (не работает в IE ниже 9-й версии):

 .ajax__tab_header :nth-child(2)
{
    float: right !important;
}

Или вы можете применить стиль с помощью javascript (прямо под ScriptManager):

 <script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

    function pageLoaded(sender, args) {
        $get("<%= TabPanel2.ClientID %>_tab").setAttribute("style", "float:right");
    }
</script>

Где TabPanel2 — это идентификатор TabPanel, который вам нужно переместить вправо.

Ответ №2:

=D Выборочный

Ознакомьтесь с этой библиотекой js… это исправит проблему с вашим CSS-селектором