JSFiddle - React, Tailwind, and code Playground

by mpalmerlee

HTML

<table id="myTable" width="100%" height="100" border="0"  cellpadding="5" cellspacing="0" style="border: 1px solid #97A5B0;font-size:12px;display:none">
    <tr><td colspan='2' style="height:21px;line-height:10px;background-color:#f5f5f5;font-size:14px;" >Jquery css height test</td></tr>   
    <tr style="height: 25px;">
        <td width="20%">My Test Input Box:</td>
        <td width="80%"><div id="mydiv" style="width: 100%;height:16px;"></div></td>
    </tr>
    <tr style="height: 25px;">
        <td width="20%">My Test Select Box:</td>
        <td width="80%"><div id="mySelect" style="width: 100%;height:20px;"></div></td>
    </tr>
    <tr><td colspan="2" style="height: 100%; width: 100%;background-color:#f5f5f5"></td></tr>
</table>

<div>Height before and after</div>
<div id="showHeightBefore"></div>
<div id="showHeightAfter"></div>
<div>New Form Element before and after:</div>
<div id="showNewElmHeightBefore"></div>
<div id="showNewElmHeightAfter"></div>

CSS

html, body
{
    width: 100%; height: 100%;
    border: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
    font-family: Helvetica, Arial, san serif; 
    font-size: 12pt;
    min-height: 100%;
}

.std_textbox
{
  border     : 1px solid #97A5B0;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 /* box-sizing: content-box;  */       /* Opera/IE 8+ */
}


.std_selectbox
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: content-box;         /* Opera/IE 8+ */
}

JavaScript

$(document).ready(function() {

    var myDiv = $('#mydiv');
    var newElm = $("<input type='text' id='myNewElement' class='std_textbox' value='hello there' style='border:1px solid #97A5B0;' />");

    newElm.css("height", myDiv.css("height"));
    newElm.css("width", myDiv.css("width"));

    var mySelect = $('#mySelect');
    var newSelect = $("<select id='myNewSelect' class='std_selectbox'><option>One</option><option>Two</option></select>");


    newSelect.css("height", mySelect.css("height"));
    newSelect.css("width", mySelect.css("width"));


    $('#showHeightBefore').html(myDiv.css('height'));
    $('#showNewElmHeightBefore').html(newElm.css('height'));
    myDiv.replaceWith(newElm);
    mySelect.replaceWith(newSelect);
    //myDiv.css('height', myDiv.css('height'));
    $('#showHeightAfter').html(myDiv.css('height'));
    $('#showNewElmHeightAfter').html(newElm.css('height'));

    $('#myTable').show();
});