Create Dynamic Bubble Text

The examples below how to create dynamic bubble text. This allows you to feed text into a method and dynamically add the css required to display the text in a bubble format.

        private void DisplayBubbleText(string sVal)
        {
            pnlMain.Controls.Clear();
            string sLetter = "";
            for (int i = 0; i <= sVal.Length - 1; i++)
            {
                sLetter = sVal.Substring(i, 1);
                if (sLetter == " ")
                {
                    pnlMain.Controls.Add(new LiteralControl("</div style=" + dQ("color:white;background-color:white;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;") + ">" + sLetter + "</div>"));
                }
                else
                {
                    pnlMain.Controls.Add(new LiteralControl("</div style=" + dQ("color:white;background-color:dodgerblue;border-radius:50%;font-size:36px;height:50px;width:50px;text-align:center;display:inline-block;border-style:none;float:left;") + ">" + sLetter + "</div>"));
                }
            }

        }
        

You can test the method using the drop down list below.