Button and input elements doesn't get applied css style : background

Question

I want to bring output similar to one shown in the figure. I build the table in table2() and build buttons using ButtonDOM().

I want to get the layout shown in figure, so I make the button elements move to right by some pixels. I have a basic question in css,

To make elements move left, right, top, bottom I have to set position property to relative or absolute but when I resize the window, I see elements are rearranged incorrect way. I want to move elements left, right, top, bottom as well on window resize element to show in correct manner. How to achieve this?

I have applied background color to whole div but I see the buttons and date input element appear outside the div, though all these elements are within this div.

Note : I had to position the input date and button elements relative and absolute and the div #buttonsdiv relative just to position elements where I needed

 function maintest () { table2(); ButtonDOM(); addClasses(); } function table2 () { let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable"); let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable"); let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"}); let $row1 = $('<tr>').appendTo($table); $('<td>').appendTo($row1); let header = $('<td>').text("Feature").appendTo($row1); let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table); let $cell0 = $('<td>').appendTo($row2); let $cell1 = $('<td>').appendTo($row2); let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1); $("#BorrowableTable").append($table); autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { selectedObj = ui.item.value; } }); } function addClasses () { let tableRows = $('tr').addClass('tableRows'); let tableDefn = $('td').attr({"class":"tableDefn"}); let tableHeader = $('th').attr({"class":"tableHeader"}); let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"}); } function ButtonDOM() { let buttonsdiv = $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv')); $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"}); $("<td>").html("Return Date").insertBefore(returnDate).css({"position":"relative","left":"350px","display":"inline"}); $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv) }

 #buttonsdiv { height: unset !important; width:50%; position: relative; left :50px !important; bottom :0px !important; background-color: papayawhip !important; } #BorrowableTable { display: flex !important; flex-direction: column; height:fit-content !important; } #borrowable { display: unset !important; border-collapse: collapse; border-spacing :unset !important; margin-left:100px; } #BorrowableTable,.creamcolorInput,#buttonsdiv { background-color: papayawhip; } #borrowButton { position: absolute; left: 325px; top: 50px; height: 36px; width: 205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top: 35px; margin-left: 2px; } #returnDate { position: absolute; left : 330px !important; top:25px; height:36px; width:200px; } .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */ padding: 0; margin: 0; font-family: ffunit; font-size: 14px; font-weight: bold; padding-right: 50px !important; } button { height:36px; width:205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top:35px; margin-left: 2px; } input { height: 30px; width: 250px; font-size: 20px; text-indent: 6px; } .tbodyDOM { float: left !important; } .images { position: relative !important; cursor: pointer !important; width:35px !important; height:35px !important; left: 35px !important; } .underline { text-decoration: underline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <body onload="maintest()"> <div id="BorrowableTable"></div> </body>

Answer 1

I have done changes in javascript and css please check and update

 function maintest () { table2(); ButtonDOM(); addClasses(); } function table2 () { let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable"); let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable"); let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"}); let $row1 = $('<tr>').appendTo($table); $('<td>').appendTo($row1); let header = $('<td>').text("Feature").appendTo($row1); let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table); let $cell0 = $('<td>').appendTo($row2); let $cell1 = $('<td>').appendTo($row2); let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1); $("#BorrowableTable").append($table); autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { selectedObj = ui.item.value; } }); } function addClasses () { let tableRows = $('tr').addClass('tableRows'); let tableDefn = $('td').attr({"class":"tableDefn"}); let tableHeader = $('th').attr({"class":"tableHeader"}); let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"}); } function ButtonDOM() { let buttonsdiv = $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv')); $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"}); $("<td>").html("Return Date").insertBefore(returnDate).css({}); $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv) }

 #buttonsdiv { height: unset !important; width:50%; position: relative; left :50px !important; bottom :0px !important; background-color: papayawhip !important; } #BorrowableTable { display: flex !important; flex-direction: column; height:fit-content !important; } #borrowable { display: unset !important; border-collapse: collapse; border-spacing :unset !important; margin-left:100px; } #BorrowableTable,.creamcolorInput,#buttonsdiv { background-color: papayawhip; } #borrowButton { cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top: 35px; margin-left: 2px; } #returnDate { height:36px; width:200px; } .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */ padding: 0; margin: 0; font-family: ffunit; font-size: 14px; font-weight: bold; padding-right: 50px !important; } button { height:36px; width:205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top:35px; margin-left: 2px; } input { height: 30px; width: 250px; font-size: 20px; text-indent: 6px; } .tbodyDOM { float: left !important; } .images { position: relative !important; cursor: pointer !important; width:35px !important; height:35px !important; left: 35px !important; } .underline { text-decoration: underline; }

 <!-- begin snippet: js hide: false console: true babel: null -->