Skip to Content

Tickers in Design Studio

Hi All

I have searched the web for this and only found one example

https://archive.sap.com/discussions/thread/3496833

Does anybody know of a way to create a ticker in Design Studio? I tried the CSS Class as above suggestion but the text did not move when viewing the application.

I may have used it wrong but I'm pretty sure its selecting the marquee class as I set a font size in the class and that repeated through to the text box.

Any ideas would be very helpful!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • avatar image
    Former Member
    Mar 16, 2017 at 05:26 PM

    Hi Alex,

    the code is working fine for me on DS1.6.

    Can you post the exact css code you have copied to your sheet?

    Best regards

    Christian

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 17, 2017 at 07:51 AM

    .marquee {
    font-size: 16px !important;
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 10s linear infinite !important;
    } .marquee:hover {
    animation-play-state: paused
    }
    @keyframes marquee {
    0% { text-indent: 100% }
    100% { text-indent: -50% } // depending on text length...
    }

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 17, 2017 at 10:32 AM

    Hi Alex,

    please remove

    // depending on text length...

    from your code. Then the ticker should work just fine.

    The // is comment in JavaScript/Bial but not CSS, thus this will mess up your code.

    Best regards

    Christian

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 17, 2017 at 10:39 AM

    HI Christian

    I now have this

    .marquee {
    font-size: 20px !important;
    color: white;
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 10s linear infinite !important;
    }

    .marquee:hover {
    animation-play-state: paused
    }
    @keyframes marquee {
    0% { text-indent: 100% }
    100% { text-indent: -50% }
    }

    Still not working though? Are you just using a text box and assigned the marquee class?

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Guys,

      Even i have got a requirement to build a ticker based message. Since you have done this , So could you please guide me if these are the right steps to implement:

      1. Drag a text component and write a text message in it

      2. Then In CSS of text component, paste the ABOVE mentioned code of ticker.

      3. Run the application.

      Kindly suggest me if this is the right way to build. Sooner reply would be appreciable and helpful to my project work

      Br,

      Sumit Maloo