DEV Community


Posted on

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

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

To know more about this question

function maintest () {


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);
    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);

        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"});

#buttonsdiv {
     height: unset !important;
     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;

  #BorrowableTable,.creamcolorInput,#buttonsdiv {
    background-color: papayawhip;


  #borrowButton {
    position: absolute;
    left: 325px;
    top: 50px;
    height: 36px;
    width: 205px;
    cursor: pointer;
    border: solid 1px;
    font-family: ffunit;
    font-size: 14px;
    margin-top: 35px;
    margin-left: 2px;

     #returnDate {
      position: absolute;
      left : 330px !important;
   .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */

      padding: 0; 
      margin: 0;
      font-family: ffunit;
      font-size: 14px;
      font-weight: bold;
      padding-right: 50px !important;

   button {
      cursor: pointer;
      border: solid 1px;
      font-family: ffunit;
      font-size: 14px;
      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=""></script>
<script src=""></script>
<body onload="maintest()">

   <div id="BorrowableTable"></div>

Top comments (0)