Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

The arrow is missing in the carousel by the code of bootstrap 5

free521521521
Topic Author
Offline
Premium Member

More

3 years 5 months ago #242243 by free521521521

The arrow is missing in the carousel by the code of bootstrap 5 was created by free521521521

Please help us help you and fill where relevant:
Your LimeSurvey version: 6.0.0+230405
Own server or LimeSurvey hosting: Own server
Survey theme/template: Fruity
==================
I tried to set a question by "text display", with the code copy from link .

Code:

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

But the arrow in left and right side is miising.

After hundreds of tests, I found the sourse editor( codemirror ) will remove many code automatically, so the code like

Code:

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

had been removed by it.

I have tried to link the css and js from Bootstrap, but nothing works. the arrow and its code is missing all the time.

Why is that? The LS6 update mentioned about the adaptation by bootstrap 5, but this issue existed from LS 5 from my experience.

Any help ?
Thanks so much for that!

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

3 years 5 months ago - 3 years 5 months ago #242251 by Joffm

Replied by Joffm on topic The arrow is missing in the carousel by the code of bootstrap 5

Hi,
why didn't yoi provide a lss export of this question?
Do you expect us to create it from scratch to have a look at it?

Joffm

Well, Do not use the WYSIWYG-Editor, but the source code editor.

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Last edit: 3 years 5 months ago by Joffm.

Please Log in to join the conversation.

free521521521
Topic Author
Offline
Premium Member

More

3 years 5 months ago #242252 by free521521521

Replied by free521521521 on topic The arrow is missing in the carousel by the code of bootstrap 5

Oh, I upload both html file, and lss file. I do use the source editor(codemirrir) and it removes code partially.

File Attachment:

File Name: pdd-liv-sp...html.zip
File Size:1.15 KB

File Attachment:

File Name: limesurvey...wbug.lss
File Size:21.28 KB

By the way, the interface of source editor seems missing some icon and frame.

Thanks again for your help! Great help to me.

...noarrowhug.lss

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

3 years 5 months ago #242253 by Joffm

Replied by Joffm on topic The arrow is missing in the carousel by the code of bootstrap 5

Hi,

1. you still seem to use the HTML-editor.

I suggested the source code editor

which you find in your personal settings.

All these WYSIWYG editors sometimes have strange ideas. You are right, the HTML editor removes some code

2.

By the way, the interface of source editor seems missing some icon and frame.

I do not see this (Firefox)

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

3 years 5 months ago #242258 by DenisChenu

Replied by DenisChenu on topic The arrow is missing in the carousel by the code of bootstrap 5

By default CKeditor delete empty tag when save

Code:

<span class="carousel-control-next-icon" aria-hidden="true"></span>

Is an empty tag

My own options : use CKeditor in popup mode only : www.limesurvey.org/manual/First_login_-_...er_preferences#Popup

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

Please Log in to join the conversation.

free521521521
Topic Author
Offline
Premium Member

More

3 years 5 months ago #242268 by free521521521

Replied by free521521521 on topic The arrow is missing in the carousel by the code of bootstrap 5

Thanks for you guys.
I finaly make it. The solution is:
1, Go the the personal---account---personal setting---HTML editor mode. Choose sourcecode editor.
2. Then copy the right code to the question input text area.
3. save it.

I think this is a bug for editor, I did not find the same option as joffm mentioned.

for LS 6 there is the screenshot:

And, I did use CKeditor in popup mode as DenisChenu mentioned, because it only way to input original code by defualt. But the CKeditor still remove the empty tag automatically.

So I think the best way to correct this issue is fix the CKeditor in popup mode mode to unremove the tag.

Hope this gonna help others, and thanks again to you all for helping me so much.

Please Log in to join the conversation.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

3 years 5 months ago #242269 by DenisChenu

Replied by DenisChenu on topic The arrow is missing in the carousel by the code of bootstrap 5

free521521521 wrote:
So I think the best way to correct this issue is fix the CKeditor in popup mode mode to unremove the tag.

No,
It's not an issue in my opinion.
Adding empty tage etc … must be really controlled.

LimeSurey is a survey tool, not a WebSite constructor

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

3 years 5 months ago #242270 by Joffm

Replied by Joffm on topic The arrow is missing in the carousel by the code of bootstrap 5

But you found the same option
That I showed the German GUI shouldn't be a real problem, should it?

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

free521521521
Topic Author
Offline
Premium Member

More

3 years 5 months ago #242272 by free521521521

Replied by free521521521 on topic The arrow is missing in the carousel by the code of bootstrap 5

Oh I understood your opinion, DenisChenu.
I just feel confused about it. I think it would be better if the pop-up CMeditor can have the option for "auto clean the empty tag" and even it is check by default. Just like the "Enable/Disable HTML Tag Autocomplete" function now,.

I tried the 3 HTML editor mode, only source mode can achievd the none remove empty tag. so I have to switch to different mode from time to time and jump around between question editing and personal setting. And I think many user can not find the path to solve this problem by themself.

Anyway, thanks again! it is my personal opinion to imporve user experience. Really hope LS going better and better!

Please Log in to join the conversation.

free521521521
Topic Author
Offline
Premium Member

More

3 years 5 months ago #242273 by free521521521

Replied by free521521521 on topic The arrow is missing in the carousel by the code of bootstrap 5

Oh! Sorry aboout that! I did not realize it only language difference.
Thanks again, hope all the reader of this thread can understood it! in German and Englsih