WebSite X5Help Center

 
Дмитрий Тулупов
Дмитрий Тулупов
User

В дополнительной функции Accordion Text есть проблема с названием.  ru

Автор: Дмитрий Тулупов
Просмотрено 1354, Подписчики 1, Размещенный 0  

Купил Accordion Text, чтобы скомпоновать большое количество текста. Удобная "гормошка" , но я столкнулся с проблемой.

В зоголовке раскрывающегося текста, нет возможности для длинных приложений. Только 2-3 слова. Эта функция не умеет переносить заголовок на 2,3 строки, а имеет одну строку. По этой причине текст получается обрезанный.

В раскрывающемся тексте таких проблем не наблюдается а  в заголовке эта проблема есть и она сильно напрягает.

Кто знает выход из положения? 

Заранее благодарен, Дмитрий. 

Размещено
6 Ответы - 1 Полезно - 1 Корректно
Дмитрий Тулупов
Дмитрий Тулупов
User
Автор

Дополнение к выше сказанной проблеме.

Оказалось что стиль 5 и 6 умеют переносить на несколько строк название. А мне нужен 3 стиль написание текста. Он не умеет переносить строки в названии и длинный текст получается обрезанный. Особенно в мобильной версии.

Подскажите, как мне выйти с этого положения?

Читать больше
Размещено От Дмитрий Тулупов
Pavel M.
Pavel M.
User

Как выйти - сокращайте описания)

Читать больше
Размещено От Pavel M.
Дмитрий Тулупов
Дмитрий Тулупов
User
Автор

Нет возможности сократить описание. 

Читать больше
Размещено От Дмитрий Тулупов
Incomedia
Stefano G.
Incomedia

Hi Dmitry

Unfortunately, I have to confirm that this is the expected behavior of the mentioned Object.

In order to preserve the same height for each Title block, the size of the text will be limited to a single line exclusively, instead of showing more than one and having a non-coherent continuity in the title space size.

This is how the Object has been currently designed, but several Idea topics have already been opened to suggest possible improvements, and this one is one of those.

As of now, there's no news on this matter, but I can confirm that the need for this change has already been notified to the developers and they're currently aware of this

Thank you for your feedback on the Object as we keep on working to always improve this functionality

Stefano

GOOGLE TRANSLATE ---

Привет Дмитрий

К сожалению, я должен подтвердить, что это ожидаемое поведение упомянутого объекта.

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

Именно так в настоящее время проектируется объект, но несколько тем Idea уже были открыты, чтобы предложить возможные улучшения, и эта - одна из них.

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

Спасибо за ваш отзыв об объекте, так как мы постоянно работаем над улучшением этой функциональности

Стефано

Читать больше
Размещено От Stefano G.
Vitaliy M.
Vitaliy M.
User

Вот простой пример "Универсальный спойлер" для WebSite X5 17.0.11 Professional

Используем HTML код:

<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №1</h3></div>
<div class="contents">Содержимое внутри спойлера №1<br>
Lorem ipsum dolor sit amet, consectetur .
Donec commodo sapien dapibus consequat.
Phasellus a sagittis massa.
</div>
</div>

<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №2</h3></div>
<div class="contents">Содержимое внутри спойлера №2<br>
Lorem ipsum dolor sit amet, consectetur .
Donec commodo sapien dapibus consequat.
Phasellus a sagittis massa.</div>
</div>

<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №3</h3></div>
<div class="contents">Содержимое внутри спойлера №3<br>
Lorem ipsum dolor sit amet, consectetur .
Donec commodo sapien dapibus consequat.
Phasellus a sagittis massa.</div>
</div>

<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №4</h3></div>
<div class="contents">Содержимое внутри спойлера №4<br>
Lorem ipsum dolor sit amet, consectetur .
Donec commodo sapien dapibus consequat.
Phasellus a sagittis massa.</div>
</div>

<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №5</h3></div>
<div class="contents">Содержимое внутри спойлера №5<br>
Lorem ipsum dolor sit amet, consectetur .
Donec commodo sapien dapibus consequat.
Phasellus a sagittis massa.</div>
</div>

<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №6</h3></div>
<div class="contents">Содержимое внутри спойлера №6<br>
Lorem ipsum dolor sit amet, consectetur .
Donec commodo sapien dapibus consequat.
Phasellus a sagittis massa.</div>
</div>

Вставьте его, как показано на скриншоте

Используйте код стилей:

<style type="text/css">
.spoiler {
overflow: hidden;
margin-bottom: 10px;
border: 1px solid #bbbbbb;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0 0 9px #dddddd inset; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
-moz-box-shadow: 0 0 9px #dddddd inset; /*FF 3.5+*/
box-shadow: 0 0 9px #dddddd inset; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
.title_h3 {
cursor:pointer;
background: #dddddd;
margin: 0 -10px 0 -10px;
padding: 10px;
padding-left: 20px;
border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
-webkit-box-shadow: 0 0 9px #dddddd inset; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
-moz-box-shadow: 0 0 9px #dddddd inset; /*FF 3.5+*/
box-shadow: 0 0 9px #dddddd inset; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
.closed .contents {
display:none;
}
.closed h3 {
background: #bbbbbb;
}
.contents {
padding: 10px;
}
</style>

Вставьте его, как показано на скриншоте

Используйте скрипт:

<script type="text/javascript">
var BgColorClosed = '#bbbbbb'; /* Фон заголовка спойлера - закрыт */
var BgColorOpen = '#dddddd'; /* Фон заголовка спойлера - открыт */
$(".closed").toggleClass("show");
$(".title").click(function(){
$(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
if ($(this).parent().hasClass("show"))
$(this).children(".title_h3").css("background",BgColorClosed);
else $(this).children(".title_h3").css("background",BgColorOpen);
});
</script>

Вставьте скрипт, как показано на скриншоте

Читать больше
Размещено От Vitaliy M.
Vitaliy M.
Vitaliy M.
User

Сам проект здесь

Читать больше
Размещено От Vitaliy M.