Textbox style

Ask the community
,
1

Hi,
That’s probably a very simple question, but I don’t really know how to do it.
I’d like to display 2 strings with different font styles in one textbox.
How should it be done?

Thanks,
J.D.

2

One easy option would be to group together two text boxes or attach them to a container or similar so they are all grouped together, then align up the two text boxes so that they look like the text is all one line and simply set the data for each text box with each text box having the different style.

Obviously, if you do this on the desktop editor then also make sure that it is aligned properly in the mobile editor too.

3

The problem is that these 2 strings are extracted from the database and they may have different lengths in different cases. So if I put 2 text-boxes side by side, it may look ugly in some cases (unnecessary spaces).

4

There’s an ugly way to do it, by creating 2 hidden text-boxes, populating them with the different strings and then use a new text box to combine them, like this:

$w(“#newTextElemet”).html = $w(“#text1”).html + $w(“#text2”).html;

but this is not a nice way to deal with it. I guess it’s possible to write a function that takes variables and convert them into one html string with different styles (but it won’t be very easy to use).

Correction : the above works but breaks the texts into 2 different lines, so it’s not useful for me. I’m wondering how to handle it.
Any idea will be welcome.

J.D.

5

Found a solution:

let textProperties1 = {
         numberOfStrings: 2,
         fontColor: ["#FF4040", "#0000a0"],
         fontFamily: ["reklamescriptw00-medium,cursive", "raleway-semibold,raleway,sans-serif"],
         fontSize: ["30", "14"],
         fontWeight: ["normal","bold"],
         text: ["Text1", "Text2"]
     }
 
$w("#text1").html = concatText(textProperties1);
function concatText(textObj) {
 const quoteMark = "\"";
 let concatHtml = "<p ";
 for(let i = 0; i < textObj.numberOfStrings; i++) {
        concatHtml += ` style=${quoteMark}font-size:${textObj.fontSize[i]}px; color:${textObj.fontColor[i]}; font-family:${textObj.fontFamily[i]}; font-weight:${textObj.fontWeight[i]};${quoteMark}> ${textObj.text[i]}</span><span`
    }
 let finalHtml =concatHtml.slice(0, concatHtml.length - 4) + "/p>";
 return finalHtml;
    }