HTML Running Banner

Issue

This Content is from Stack Overflow. Question asked by Pasha Grobov

I need to make a dynamic running banner in one line, it works but it spans two lines.

Html:

<div class="runtext-container  col-12" style="margin-top: 5%;">
     <div class="main-runtext">
          <marquee direction="right" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
             <div class="holder" id="bannerHolder"></div>
          </marquee>
     </div>
</div>

JS :

$(document).ready(async function () {
    GetBannerMessages();
});

async function GetBannerMessages() {
    $.ajax({
        url: '/Banner/Banner',
        type: 'POST',
        data: {

        },
        datatype: "html",
        success: function (res) {
            console.log(res);
            var holder = $('#bannerHolder');
            for (var i = 0; i < res.length; i++) {
                var row = "<div class='text-container' >&nbsp; &nbsp; <a data-fancybox-group='gallery' class='fancybox' href='#' title='" + res[i].Msg_Text + "'>" + res[i].Msg_Text + "</a></div>" +
                    "<div class='text-container'>&nbsp; &nbsp; <a data-fancybox-group='gallery' class='fancybox' href='#'> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;</a></div>";
                holder.append(row);
            }

        }

    });
}

Can’t figure out why it spans 2 lines.
Please help.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?