CODEWITHSUNDEEP
javascripthtml
Krishna Sarswat
Krishna Sarswat

Reputation: 17

not able to increase width of dynamically created label in javascript?

i have a problem and it is that i am trying to create label dynamically and set text of a textarea but the problem is that i am not able to increase the size of the label dynamically through javascript, i've posted both html and javascript code below :-

javascript

function createLabel(){
    var lbl = document.createElement("label");
    lbl.id = "label2";
    var tr = document.createElement("tr");
    var lblText = document.getElementById("postbox").value;
    lbl.innerHTML = lblText;
    lbl.style.display = "block";
    tr.appendChild(lbl);
    tr.style.display = "block";
    document.getElementById("postTd").appendChild(tr);
    $("#label2").css("width", "50px;")
}

html :-

<div id="wrapper">
<a href="profile.php"><label id="label1" style="cursor:pointer;"><?php echo user_details('username'); ?></label></a>
<textarea id="postbox" rows="4" style="position: absolute; resize:none; margin-left:450px; margin-top:70px;" cols="70"></textarea>
<input type="submit" onclick="createLabel()" value="Post" style="position: absolute; margin-top:150px; margin-left:990px;" name="submit" />
<div id="hrln1" style="position:absolute; margin-top:150px; width:1050px; margin-left:0px;"><hr /></div>
<div id="postContainer">

    <table id="postTable">
    <td id="postTd">

    </td>        
    </table>

</div>

Upvotes: 2

Views: 1860

Answers (1)

danwellman
danwellman

Reputation: 9273

You're setting the display mode of the label to inline, so it will ignore any width you set on it (whether it is set with script or CSS)

For elements to obey width correctly they must be set to display:block or display:inline-block

Upvotes: 2

Related Questions