отображать всплывающее окно начальной загрузки с языками с письмом справа налево

Я использую bootstrap 3.3.5.

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

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

Если пользователь просматривает страницу на языке с письмом справа налево, я загружаю страницу css начальной загрузки rtl, в противном случае используется страница css с письмом слева направо.

Например, css начальной загрузки справа налево:

<link rel="stylesheet" href="..../assets/plugins/bootstrap/css/bootstrap-rtl.min.css">

Начальный css слева направо:

<link rel="stylesheet" href="..../assets/plugins/bootstrap/css/bootstrap.min.css">

Вот визуальное отображение всплывающего окна для языка с письмом слева направо:

введите здесь описание изображения

Вот визуальное отображение всплывающего окна с написанием справа на язык, которое отображается неправильно (стрелка и положение всплывающего окна все еще как при использовании языка слева направо/css):

введите здесь описание изображения

Пожалуйста, игнорируйте содержимое всплывающего окна справа налево, так как я еще не разместил файлы/ссылки перевода.

Я искал SO и Google для этого, но не смог найти ссылку на эту проблему. Есть ли у кого-нибудь предложения по исправлению этой проблемы?


html right-to-left css twitter-bootstrap-3 bootstrap-popover
person user1261774    schedule 11.08.2015    source источник
comment
вы можете увидеть разницу в отображаемом (очевидно, путем проверки) свойстве css для обоих и сравнить разницу.   -  person Suman KC    schedule 11.08.2015

Ответы (2)


arrow_upward
2
arrow_downward

Я обнаружил, что это решит проблему с всплывающими окнами, с которой вы сталкиваетесь.

В вашем rtl css поместите этот код:

.popover {
    direction: rtl;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

Приведенный выше код перевернет все всплывающее окно.

Далее вам нужно будет добавить следующий код прямо под вышеупомянутым классом popover css:

.popover-title {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.popover-content {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

приведенный выше код затем вернет заголовок и тело всплывающего окна.

Это будет означать, что стрелка всплывающего окна расположена правильно и текст во всплывающем окне также отображается правильно — в данном случае rtl.

Надеюсь, это решит вашу проблему.

person user3354539    schedule 29.08.2015

arrow_upward
0
arrow_downward

попробуйте это в файле css

#your_id{
    direction: rtl;
}

он должен работать

person Dkova    schedule 11.08.2015
comment
Dvoka, спасибо за предложение, но это не работает. Эта проблема возникает для всех всплывающих окон, а не только для одного, поэтому я предполагаю, что проблема связана с CSS. - person user1261774; 11.08.2015
comment
что вы имеете в виду под всеми всплывающими окнами? Вы пытались изменить CSS, чтобы он был без #id{} и был .class{}? - person Dkova; 11.08.2015
comment
Dvoka, да, я пробовал - никаких изменений в поповерах. Это происходит со всеми всплывающими окнами на тестовом сайте для языков rtl. - person user1261774; 11.08.2015