CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan Parent
Jonathan Parent

Reputation: 33

Add spaces to javascript string depending on element width

I have a form to add users to a select list from 2 textboxes (Last name and First name).

When I click on the "+" button, it adds an option with the last name and first name specified to the select element below. Right now, it adds the option with only one white space between last and first name, but I would like the first name to be aligned with the above "First name" textbox.

Here's a fiddle with my sample code: http://jsfiddle.net/fx37j71s/12/

<table>
<tr>
    <td>Last Name</td>
    <td>First Name</td>
</tr>
<tr>
    <td><input type="text" id="txtlastname" /></td>
    <td><input type="text" id="txtfirstname" /></td>
    <td><input type="button" value="+" onclick="addemployee();" /></td>
</tr>
<tr>
    <td colspan="2"><select id="lbxname" size="5" style="width:500px"></select></td>
    <td valign="top"><input type="button" value="-"onclick="removeemployee();" /></td>
</tr>
</table>

And the addemployee() function:

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');
    var text = document.createTextNode(lastname.value + ' ' + firstname.value);

    option.appendChild(text);
    select.appendChild(option);
}

Is there a way to achieve this in JS or jquery or maybe CSS? I have tried to add a fixed amount of spaces minus the amount of characters in Last name, but the actual width of the string depends on the characters (i.e. "PPPPP" is wider than "lllll" even though they both have 5 characters). I also found the "clientWidth" property, but I can't seem to make it work properly.

Thank you :)

Upvotes: 0

Views: 1024

Answers (2)

Jonathan Parent
Jonathan Parent

Reputation: 33

Based on charlietfl's answer and Evilzebra's comment, this worked for me:

Updated fiddle: http://jsfiddle.net/vcfpd450/2/

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML=padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    var x = str.length;
    while(x < 31){
        str+='&nbsp';
        ++x;
    }    
    return str;
}

CSS:

#lbxname
{
    font-family: monospace;
}

Basically, I add spaces to the string until I reach the desired width (31 in this case). Using a monospace font-family makes sure the width is consistent with the number of characters.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Instead of creating textNode can set innerHTML

Something like:

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML = padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    while(str.length < 500){
        str += '&nbsp;';
    }    
    return str
}

DEMO

Upvotes: 1

Related Questions